estaba creando una función básica de reaccionar js todo en la que quiero marcar/desmarcar el botón de tareas pendientes en función de mi matriz de tareas pendientes donde al hacer clic en cada botón se agregará/eliminará la clase, pero aparecerá el mensaje de error "elem.map no es una función" . por favor, siéntase libre de editar la URL en vivo, será muy apreciado.
https://codesandbox.io/s/stupefied-zeh-kznykd?file=/src/App.js:325-329
Su función de toggle solo necesita aceptar el índice como argumento.
Luego map sobre la matriz de estado y establece un nuevo estado.
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>