title: How to update a single key value pair in an array of objects in react?
body: <p>I am trying to update a single key value pair in an array of objets using React.</p>
  <h3>Here is the setup</h3>
  <p>An array of objects</p>
  <pre class="lang-json prettyprint-override"><code>const array = [
    {id:1,name:'Tyler',age:23},
    {id:2,name:'Lauren',age:28},
    {id:3,name:'Nico',age:14},
  ]
  </code></pre>
  <p>Given an id and age, I want to be able to update the single object that matches the id. For example, given an id of 2 and age of 56, <code>{id:2,name:'Lauren',age:28}</code> should change to <code>{id:2,name:'Lauren',age:56}</code></p>
  <h3>My approach</h3>
  <p>I've set up useState to copy the array of object. However, I am struggling to filter out for the selected id, change the age, and return the updated array.</p>
  <p>This is what I currently have:</p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from &quot;react&quot;;
  
  const array = [
    { id: 1, name: &quot;Tyler&quot;, age: 23 },
    { id: 2, name: &quot;Lauren&quot;, age: 28 },
    { id: 3, name: &quot;Nico&quot;, age: 14 }
  ];
  
  export default function App() {
    const [list, setList] = useState(array);
  
    const updateAge = (id = 2, age = 56) =&gt; {
      setList([...list, list.filter((item) =&gt; item.id === id)]);
    };
  
    return (
      &lt;&gt;
        &lt;ul&gt;
          {list.map((item) =&gt; {
            return (
              &lt;li&gt;
                {item.name} | {item.age}
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
        &lt;button onClick={updateAge}&gt;Update age&lt;/button&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>Here is my codesandbox <a href="https://codesandbox.io/s/busy-johnson-puufv?file=/src/App.js:0-612" rel="nofollow noreferrer">link</a></p>