title: Add edit fields on table row on click in reactjs without using react-table library
body: <p>How to change a particular row that is clicked in JSX table to change to input editable row without using any libraries such as react-table? </p>
  
  <pre><code>&lt;table className="table-data"&gt;
   &lt;tbody&gt;
   &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Age&lt;/th&gt;
      &lt;th&gt;Class&lt;/th&gt;
      &lt;th&gt;Section&lt;/th&gt;
   &lt;/tr&gt;   {this.state.students.map((item,key) =&gt; {return
  
  
  &lt;Fragment key={key}&gt;
            &lt;tr key={key} onClick={()=&gt; 
      {this.setState({clientIsEditing:true},this.edit(key,item))}}&gt; 
      &lt;td&gt;{item[1]}&lt;/td&gt;    
      &lt;td&gt;{item[2]}&lt;/td&gt;    
      &lt;td&gt;{item[3]}&lt;/td&gt;  
      &lt;td&gt;{item[4]}&lt;/td&gt; 
      &lt;/tr&gt;  
      &lt;/Fragment&gt;
      &lt;tbody&gt;
      &lt;/table&gt;})}
  </code></pre>
  
  <p>the above is the code to display table. <code>this.state.students</code> has the student details from db. I want the particular table row to be changed to a row of input fields on click. Kindly help. I'm new to the world of react. </p>