copy object using map in Reactjs

Question

What I'm trying to do is copy object using object-array with map api.
like below. decomposite the array inside of an object, and copy.

 const obj = [{id: 1, arr: ['a', 'b', 'c']}];


//expected result
  const result = [
    {id: 1, arr: 'a'},
    {id: 1, arr: 'b'},
    {id: 1, arr: 'c'},
  ];

and also setState.

  const [obj2, setObj2] = useState([{id: 1, arr: ['a', 'b', 'c']}]);

  //Both ways were invalid
  //setObj2(...obj2, obj2.arr.map(rr => obj2:rr)) 
  //setObj2(...obj2, obj2.arr : obj2.arr.map(rr => rr))

//expected result
console.log(obj2);
=> [
    {id: 1, arr: 'a'},
    {id: 1, arr: 'b'},
    {id: 1, arr: 'c'},
   ];

I have no idea how to make it

obj is an array with only one element or maybe more?

Viet
– Viet

2021-04-29 06:34:57 +00:00
Commented Apr 29, 2021 at 6:34 — Viet
– Viet, Commented Apr 29, 2021 at 6:34
it can be more then one

bonlim
– bonlim

2021-04-29 06:37:40 +00:00
Commented Apr 29, 2021 at 6:37 — bonlim
– bonlim, Commented Apr 29, 2021 at 6:37

MorKadosh · Accepted Answer · 2021-04-29 06:37:46Z

1

You can achieve this using reduce:

 const obj = [{id: 1, arr: ['a', 'b', 'c']}];

const result = obj.reduce((acc, cur) => {
   const { id, arr } = cur;
   const res = arr.map(x => ({ id, arr: x }));
   return acc.concat(res);
}, []);

console.log(result);

answered Apr 29, 2021 at 6:37

MorKadosh

6,0053 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T J · Accepted Answer · 2021-04-29 07:16:14Z

1

You can use flatMap() like this:

const data = [{
    id: 1,
    arr: ['a', 'b', 'c']
  },
  {
    id: 2,
    arr: ['d', 'be', 'f']
  }
];


const result = data.flatMap(({id, arr}) => {
  return arr.map(item => ({id, arr: item}));
});

console.log(result);

edited Apr 29, 2021 at 7:16

answered Apr 29, 2021 at 7:02

T J

43.2k13 gold badges87 silver badges142 bronze badges

Comments

Charchit Kapoor · Accepted Answer · 2021-04-29 06:55:21Z

0

It can be done like this:

setObj2(obj2.map(item => {
   x = []
   item.arr.forEach(item2 => x.push({id:item.id, arr:item2}));
   return x;
}));

answered Apr 29, 2021 at 6:55

Charchit Kapoor

9,3242 gold badges11 silver badges26 bronze badges

Collectives™ on Stack Overflow

copy object using map in Reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related