How to add multiple objects created from form input, to a list in react-CodePudding

I have a form, that is filled in for 18 holes on a golf course, each of the holes has the following fields, hole, par, stroke, yards, courseid

As each input field is filled in, it fires onChange and sets the value of a variable in form state, to the input fields value.

In my form object I have all these fields,

const [form, setForm] = useState([
    {
        hole1: 1,
        par1: '',
        stroke1: '',
        yards1: ''
    },
    {
        hole2: 2,
        par2: '',
        stroke2: '',
        yards2: ''
    },
    {
        hole3: 3,
        par3: '',
        stroke3: '',
        yards3: ''
    },

   //repeated for 18 holes

When completed and submit is clicked, it fires the save function, A list is sent to the backend (SpringBoot) to be saved in dB.

As there are 18 holes, I need to loop over the data so that I can fill in 18 objects to put into the list to send to the backend.

I have made a holes object

   let[holes, setHoles] = useState({
        "hole": '',
        "par": '',
        "stroke": '',
        "yards": '',
        "course": {
            "courseid": ''
        }
    });

which I now want to populate with the values from the form data.

so I want to set the holes values for each field to that for,

form.hole1,
form.par1,
form.stroke1,
form.yards1

Then add that holes object to the list, then run the loop again and add all the values for hole 2, etc etc until all 18 holes are done.

When using a loop like,

for (let i= 1; i< 19; i  ) {
            holes = {
                "hole": index,
                "par": form.par,
                "stroke": form.stroke,
                "yards": form.yards,
                "course": {
                    "courseid": 3
                }
            }
            const newList = list.concat({holes})
            list = newList;
        };

how is it best to tell it to take form.par1 on the first loop, then form.par2 on the second loop etc.

I feel like I need two loops running here, so that it starts off looping through all the numbers 1-18, and before moving to the next number it loops through the objects in the form,

so it starts at hole 1, get the holes object, gets the value from the first form object, sets the 4 fields in holeto those in the firstform object i.e par1, yards1 etc, then concats the hole object to the list then moves on to the number 2 and continues this till all 18 are complete, but I am not sure how I can achieve this.

CodePudding user response：

Given the form array shaped as you've described, you can map this to the desired list of holes like so:

const list = form.map((hole, i) => {
  const num = i   1;
  return {
    hole: num,
    par: hole[`par${num}`],
    stroke: hole[`stroke${num}`],
    yards: hole[`yards${num}`],
    course: {
      courseid: 3,
    },
  };
});