i have created one basic react js todo function where i want to check/uncheck todo based on my todo array but getting error

Question

i was creating one basic react js todo function where i want to check/uncheck todo-button based on my todo array where clicking on each button it will be add/remove class, but getting error message "elem.map is not a function". please feel free to edit live url it will be highly appreciated.

https://codesandbox.io/s/stupefied-zeh-kznykd?file=/src/App.js:325-329

Answer 1

1. Your toggle function only needs to accept the index as an argument.

2. You then map over the status array, and set a new state.

const { useEffect, useState } = React;

function Accordion2() {

  const [status, setStatus] = useState([
    {
      id: 0,
      value: false
    },
    {
      id: 1,
      value: true
    }
  ]);

  // Pass in the index
  const toggle = (i) => {
  
    // And then `map` over the status state
    // updating the objects
    const mapped = status.map(todo => {
      return todo.id === i ? {
        ...todo,
        value: !todo.value
      } : todo;
    });
    setStatus(mapped);
  };

  // I'm using `useEffect` here to show you the
  // updated state
  useEffect(() => console.log(status), [status]);

  return (
    <div className="button-blocks">
      {status.map((elem, i) => {
        return (
          <button
            className={elem.value && 'active'}

            // Only pass in the index to `toggle`
            onClick={() => toggle(i)}
          >
            Todo
          </button>
        );
      })}
    </div>
  );

}

ReactDOM.render(
  <Accordion2 />,
  document.getElementById('react')
);

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>