title: How to update values of every object in an array of objects in Javascript?
body: <p>I'm trying to update a value of <strong>car</strong> in all objects in an array(data) with the values from <strong>newData</strong>, my code is:</p>
  <pre><code>import &quot;./styles.css&quot;;
  
  const data = [
    { id: 1, car: &quot;Toyota 2020&quot;, owner: &quot;BM&quot; },
    { id: 2, car: &quot;Nissan&quot;, owner: &quot;DK&quot; },
    { id: 3, car: &quot;Mazda&quot;, owner: &quot;JA&quot; },
    { id: 4, car: &quot;Ford&quot;, owner: &quot;DS&quot; }
  ];
  const newData = [&quot;Audi&quot;, &quot;Bentley&quot;, &quot;BMW&quot;, &quot;Buick&quot;];
  
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        {data?.map((item) =&gt; {
          return &lt;li key={item.id}&gt;{item.car}&lt;/li&gt;;
        })}
      &lt;/div&gt;
    );
  }
  
  
  </code></pre>
  <p>I don't know how to change car values in data with values from newData, so data would be like this:</p>
  <pre><code>const data = [
    { id: 1, car: &quot;Audi&quot;, owner: &quot;BM&quot; },
    { id: 2, car: &quot;Bentley&quot;, owner: &quot;DK&quot; },
    { id: 3, car: &quot;BMW&quot;, owner: &quot;JA&quot; },
    { id: 4, car: &quot;Buick&quot;, owner: &quot;DS&quot; }
  ];
  
  </code></pre>
  <p><a href="https://codesandbox.io/embed/agitated-silence-5zbk0?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">codesandbox</a></p>
  <p>Later in code I'm mapping through data and I need to display updated car values, I'm not sure which method to use. Any help greatly appreciated.</p>