While working on React today, I got stuck somewhere because my basic JavaScript knowledge is not good.
I want to change the value of the “name” property of any object in this array.
Codesandbox: 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" }, ];
My App.js file
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;
Advertisement
Answer
Essentially you need to create an updated array and set it. Use the callback method setPeople
to update the array. Try like this:
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>