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

Question

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.

The design/explanation here is a bit confusing, but I think what you are looking for is string interpolation in your object properties. You can do "par": form[`par${i}`], to construct the property name that you need. — murrayju
– murrayju, Commented Oct 31, 2021 at 22:28
Great thanks, it took me ages to write that question out as it's hard to explain what I wanted. I tried loads of ways of appending the value of i in the loop to par, but couldn't get it to work. I will try this tomorrow — James Smith
– James Smith, Commented Oct 31, 2021 at 22:51

murrayju · Accepted Answer · 2021-10-31 22:37:44Z

2

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,
    },
  };
});

answered Oct 31, 2021 at 22:37

murrayju

1,82218 silver badges21 bronze badges

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

1 Comment

James Smith Over a year ago

Thanks. This works great. But has now shown another issue, but I will open a new question for that.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related