How to update value array in object React js

Question

How to update value array in object React js I want update value checked by name .....................................................................................................................................................................................................................................................................................................

  const [state, setState] = React.useState([{
    name: "box",
    checked: false,
  },{
    name: "box1",
    checked: false,
  }]);
 
  const checkboxhandleChange= (event) => {

    setState({ ...state, [event.target.name]: event.target.checked });
  };

@GowriPranithBayyana when check i get error state map is not function — PEEMAPOD NEAMKUR
– PEEMAPOD NEAMKUR, Commented May 8, 2020 at 16:15
You're changing the data type of state from an array to an object. You're kindof mixing syntax from the traditional class based setState with the hooks equivalent. — Brian Thompson
– Brian Thompson, Commented May 8, 2020 at 16:20

bilwit · Accepted Answer · 2020-05-08 16:53:11Z

2

In the general case of updating an array of objects, it would be better to use map instead of trying to use a solution based on spread so that you preserve the original list of elements without adding new ones.

setState(
  state.map((item) => item.name === event.target.name ? { ...item, checked: event.target.checked } : item) 
);

What you are doing now is replacing the initial array in state to a single object.

For your specific case, you may also consider using an object instead which might be a more elegant solution given what has been shared thus far.

const [state, setState] = React.useState({
  box: false,
  box1: false,
})

const checkboxhandleChange = (event) => {
  setState({
    ...state, 
    [event.target.name]: event.target.checked
  })
};

edited May 8, 2020 at 16:53

answered May 8, 2020 at 16:16

bilwit

8191 gold badge6 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How to update value array in object React js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related