how to update nested object of array in useState hook in react?

Question

I have a component that has nested objects in array:

  const [documentObj, setDocument] = useState({
    document_name: "",
    form_values: [
      {
        field_seq: null,
        is_mandatory: false,
        field_type: null,
        field_name: "",
        select_values: [
          {
            value: false,
            label: "",
          },
        ],
      },
    ],
  });

I'm trying to update the object properties, but when I try to update the object, it is saying can not reay properties [0]

this is how I'm updating it:


<Form.Control
 type="number"
 value={documentObj.form_values[0].field_seq}
 onChange={(event) => {
  setDocument((prevStyle) => ({
  ...prevStyle,
form_values: [
{
...prevStyle.form_values,
field_seq: event.target.value,
},
],
}));
}}
/>
</Form.Group>

Probably i need to write a function to handle all input value and need some help

John Li · Accepted Answer · 2022-12-09 20:16:34Z

2

Update 2

It seems that documentObj.form_values[0] is unlikely to be undefined in the posted code, but maybe it could be in the actual project.

As an attempt to address the error perhaps also consider to check for undefined where this is used, such as in value:

value={documentObj.form_values[0]?.field_seq || ""}

Update

While not specified in the post, if Form.Control is from react-bootstrap, according to their doc the value property need to be string | arrayOf | number.

Perhaps also try set an empty string "" as the initial value of field_seq, so this component is fully controlled:

const [documentObj, setDocument] = useState({
  document_name: "",
  form_values: [
    {
      // 👇 Initial value as empty string
      field_seq: "",
      is_mandatory: false,
      field_type: null,
      field_name: "",
      select_values: [
        {
          value: false,
          label: "",
        },
      ],
    },
  ],
});

There might be other issues, but hope that this could still help locating some errors.

Original

Perhaps the intended property to read was ...prevStyle.form_values[0]?

Not sure if there are other issues without checking the error message, but could probably try the following in setDocument to see if it improves:

<Form.Control
  type="number"
  value={documentObj.form_values[0].field_seq}
  onChange={(event) => {
    setDocument((prevStyle) => ({
      ...prevStyle,
      form_values: [
        {
          // 👇 Added [0] here
          ...prevStyle.form_values[0],
          field_seq: event.target.value,
        },
      ],
    }));
  }}
/>

edited Dec 9, 2022 at 20:16

answered Dec 9, 2022 at 6:28

John Li

7,4973 gold badges7 silver badges29 bronze badges

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

3 Comments

alimukhtor Over a year ago

how about value elemenr? still getting same error.

John Li Over a year ago

@alimukhtor Not sure what else might be tried here without testing it, but what did the error message say?

alimukhtor Over a year ago

documentObj.form_values[0].field_seq this is saying can not read properties of undefined [0]

Ayush pathak · Accepted Answer · 2022-12-09 06:15:15Z

0

const [documentObj, setDocument] = useState({ document_name: "", form_values: [ { field_seq: null, is_mandatory: false, field_type: null, field_name: "", select_values: [ { value: false, label: "", }, ], }, ], });

answered Dec 9, 2022 at 6:15

Ayush pathak

11 bronze badge

1 Comment

Luciana Oliveira Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Azzy · Accepted Answer · 2022-12-09 07:53:04Z

replacing the items in form_values based on index

<Form.Control
      type="number"
      value={documentObj.form_values[0]?.field_seq ?? ''}
      onChange={(event) => {
        setDocument((prevStyle) => {
   
    
           const newFormValues = [];
    
           if (!!prevStyle.form_values?.length) {
                              // if the form_values was empty 
           const newFormValue = { 
                 // might want to include some default data
                 field_seq: event.target.value 
           }
               newFormValues.push(newFormValue)
           } else {
                //replace first item form_values 
                newFormValues = prevStyle.form_values.map((e, idx) => {
                       if (idx === 0) {
                           return {
                              ...e,
                              field_seq: event.target.value 
                           }
                       } else {
                            return e;
                       }
                })
           }
    
     
           return {
              ...prevStyle,
              form_values: newFormValues
           }
    
    }}
    />
    </Form.Group>

Hope it helps

Collectives™ on Stack Overflow

how to update nested object of array in useState hook in react?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related