CODEWITHSUNDEEP
javascriptarraysreactjsjson
Guilherme Cavenaghi
Guilherme Cavenaghi

Reputation: 245

How to join two arrays in a map function?

What I want is to join my arrays that I get from my map function.

I tried to do with reduce :

const onFinish = (values) => {
    values.fields.map((el, idx) => {           
      
      console.log({ ...el, index: idx }); // this `console.log` prints me one array after the other
    }).reduce((acc, x) => {console.log(acc,x)}); // I tried with `reduce` but it prints me null

Also tried to do with useState:

 const onFinish = (values) => {
    values.fields.map((el, idx) => {           
      if (myArray === null){
        setMyArray(() => {
          return { ...el, index: idx };
        });
      }
      else {
        setMyArray(() => {
           return {...myArray,...el, index: idx };
        });
      }
    });
      console.log(myArray) // at my first call to this const onFinish myArray is printed as [] and at the second it prints with the last object only
   };

Someone knows how to get these objects joined/merged ?

Sample data the way that it's print: enter image description here

How I want to be: enter image description here

Upvotes: 0

Views: 2776

Answers (2)

James
James

Reputation: 22246

Does this help?

  if (myArray === null){
    setMyArray(() => {
      return [{ ...el, index: idx }];
    });
  }
  else {
    setMyArray(() => {
       return [...myArray, {...el, index: idx }];
    });
  }

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196227

Altghough it is still not very clear from the screenshots (always prefer to use text and not images for data/code), it looks like you want

const onFinish = (values) => {
  const updatedValues = values.fields.map((field, index) => ({...field, index}));
  console.log( updatedValues );
}

Upvotes: 1

Related Questions