title: Reactjs: How to edit table on specific row?
body: <p>Here is my code:</p>
  <pre><code>const [data, setData] = useState([
      {id: 1, name: 'paper', qty: 10},
      {id: 2, name: 'bottle', qty: 10},
   ]);
  
   const [isEditable, setEditable] = useState([]);
  
   useEffect(()=&gt;{
     data.map(each=&gt;{
       isEditable[each.id] = false;
     })
   })
   
    const handleEdit = (id) =&gt; {
       var arr = data;
       arr[id] = !arr[id];
       setEditable(arr);
    }
    return (
      &lt;div&gt;
           {data.map((row) =&gt; (
            &lt;TableRow key={row.id}&gt;
              &lt;TableCell&gt;{row.id}&lt;/TableCell&gt;
              &lt;TableCell&gt;{row.name}&lt;/TableCell&gt;
              { isEditable[row.id] ? 
                &lt;TableCell&gt;
                  &lt;TextField id=&quot;outlined-basic&quot; size=&quot;small&quot; variant=&quot;outlined&quot; /&gt;
                &lt;/TableCell&gt; :
                &lt;TableCell&gt;{row.qty}&lt;/TableCell&gt; 
              }
              &lt;TableCell&gt;
                  &lt;button onClick={()=&gt; handleEdit(row.id)}&gt; Edit &lt;/button&gt;
              &lt;/TableCell&gt;                                            
            &lt;/TableRow&gt;
          ))}
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I'd like to click on Edit button on the table row and the Textfield appears only on specific row, but here when I click it, the textfields are appear on other rows instead. What is wrong here?</p>