title: How to change/add value of a certain row of an array using useState Hook in React
body: <p>I have a following array,</p>
  <pre><code>const bio = [
    {id: 1, name: &quot;Talha&quot;, age: 26}, 
    {id: 2, name: &quot;Ayub&quot;, age: 22}
  ]
  </code></pre>
  <p>Here is a complete code of mine,</p>
  <pre><code>import './App.css';
  import React, {useState} from 'react';
  
  const bio = [
    {id: 1, name: &quot;Talha&quot;, age: 26}, 
    {id: 2, name: &quot;Ayub&quot;, age: 22}
  ]
  
  const App = () =&gt; {
  
    const [bioData, setbioData] = useState(bio); 
    const clear_function = () =&gt; setbioData([])
    return (
      &lt;div className=&quot;App&quot;&gt;
        {
        bioData.map((arr) =&gt;
        &lt;&gt;
         &lt;h3 key={arr.id}&gt;Name: {arr.name}, Age: {arr.age}&lt;/h3&gt;
        &lt;button onClick={() =&gt; clear_function()}&gt;Click me&lt;/button&gt;
        &lt;/&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Now, this code hooks the whole array to useState. Whenever I click the button &quot;Click me&quot;, it sets the state to empty array and returns empty array as a result.</p>
  <p>But what if I want to remove a specific row of the array? I have made two buttons, each for one row. What I want to do is if I click the first button, it removes the first row from the array as well and keeps the 2nd array.</p>
  <p>Similarly, if I want to change a specific attribute value of a specific row, how can I do that using useState hook? For example, I want to change the <strong>name</strong> attribute of the <strong>2nd row</strong>. How is it possible to do this with useState?</p>
  <p>And same case for addition. IF I make a form and try to add a new row into my bio array, how would I do that? <em>I searched it up on Google, found a similar post as well but the answer given in it wasn't satisfactory and did not work, which is why I am asking this question again.</em></p>