Mientras trabajaba en React hoy, me quedé atascado en algún lugar porque mi conocimiento básico de JavaScript no es bueno.
Quiero cambiar el valor de la propiedad "nombre" de cualquier objeto en esta matriz.
Códigos y caja: https://codesandbox.io/s/dank-rain-udjcxe?file=/src/App.js
const data = [ { id: 1, name: "jonas" }, { id: 2, name: "mark" }, { id: 3, name: "elon" }, ];Mi archivo App.js
const App = () => { const [people, setPeople] = useState(data); const changePerson = (id) => { // if I click on the button, the "name" value of the current object will change to anything }; return ( <main> <section> {people.map((person) => { return ( <div className="card" key={person.id}> {person.name} <button onClick={() => changePerson(person.id)}>change</button> </div> ); })} </section> </main> ); }; export default App;Esencialmente, necesita crear una matriz actualizada y configurarla. Use el método de devolución de llamada setPeople para actualizar la matriz. Prueba así:
const data = [ { id: 1, name: "jonas" }, { id: 2, name: "mark" }, { id: 3, name: "elon" } ]; const App = () => { const [people, setPeople] = React.useState(data); const changePerson = (id) => { setPeople((prevPeople) => prevPeople.map((person) => person.id === id ? { ...person, name: "changed" } : person ) ); }; return ( <main> <section> {people.map((person) => { return ( <div className="card" key={person.id}> {person.name} <button onClick={() => changePerson(person.id)}>change</button> </div> ); })} </section> </main> ); }; ReactDOM.render(<App />, document.querySelector('.react')); <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 class='react'></div>