how to update object using index in react state?

Question

suppose i am having an array of like

[
  { id: 1, name: "John" , selected: true}
  { id: 2, name: "Jim" , selected: false }
  { id: 3, name: "James" , selected: false }
]

I am having function which get id and on the basis of that id I want to change the selected property of object to true and other selected property object to false

here is my function what i have tried but its throwing error

const handleOnClick = (id) => {
     const temps = state.findIndex((sub) => sub.id === id)
        setState(prevState => ({
            ...prevState,
            [prevState[temps].selected]: !prevState[temps].selected
        }))

zero298 · Accepted Answer · 2020-09-26 18:32:27Z

Use a .map() to iterate everything. You shouldn't change values within the array without recreating the tree down to the changed object. See below example.

Below you will:

map over every element
Spread their current values
Overwrite the selected depending on if the id is the newly "selected" id

I also supplied an additional function to update using the index of the item in the array instead of by id since your title is "how to update object using index in react state?", although your question also mentions changing by id. I would say go by id if you have the choice, array indices can change.

const App = () => {
  const [state, setState] = React.useState([
    { id: 1, name: "John" , selected: true},
    { id: 2, name: "Jim" , selected: false },
    { id: 3, name: "James" , selected: false }
  ]);

  // This takes the ID of the item
  const handleOnClick = (id) => {
    const newState = state.map(item => {
      return {
        ...item,
        selected: item.id === id
      };
    });
    
    setState(newState);
  };
  
  // This takes the index of the item in the array
  const handleOnClickByIndex = (indexToSelect) => {
    const newState = state.map((item, idx) => {
      return {
        ...item,
        selected: indexToSelect === idx
      };
    });
    
    setState(newState);
  };
        
  return (
    <div>
      {state.map((item, mapIndex) => (
        <div key={item.id}>
          <div>
            <span>{item.name} is selected: {item.selected ? "yes" : "no"}</span>
            {/* This will update by ID*/}
            <button onClick={() => handleOnClick(item.id)}>Select using ID</button>
            {/* This will update by the index of the array (supplied by map) */}
            <button onClick={() => handleOnClickByIndex(mapIndex)}>Select using index</button>
          </div>
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(
  <App/>,
  document.getElementById("app")
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Collectives™ on Stack Overflow

how to update object using index in react state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related