title: In React how to create input fields and change current items in a row?
body: <p>I have a parent and a child components. There creates a table with data. I have a modify icon in every row of a table. Now I need when this icon is clicked - there were created input fields for this particular row and this data can be modified, then if pressed "Ok" - pass this changed data to database with "axios.put" method, and if pressed "cancel" - do note modify item. 
  I created isInEditMode variable. But I don't know where to create that input fields, in child or in parent?</p>
  
  <p>Child:</p>
  
  <pre><code>import React from 'react';
  import './tableHasp.css';
  
  
  class TableHasp extends React.Component {
    render(){
      return  ( 
        &lt;tr&gt;
           &lt;td&gt;{ this.props.hasps._id}&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.serial }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.soft }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.numberOfKeys }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.company.name }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.company.city }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.company.phone }&lt;/td&gt;
           &lt;td&gt;{ this.props.hasps.dateCreated }&lt;/td&gt;
           &lt;td&gt;&lt;i onClick={() =&gt; this.props.modifyEvent(this.props.hasps)} className="far fa-edit btnEdit"&gt;&lt;/i&gt;&lt;/td&gt;
           &lt;td&gt;&lt;i  onClick={() =&gt; this.props.delEvent(this.props.hasps._id)} className="far fa-trash-alt btnDelete" &gt;&lt;/i&gt;&lt;/td&gt;
        &lt;/tr&gt;
        );
    }
  }
  
  export default TableHasp;
  </code></pre>
  
  <p>Parent data for child:</p>
  
  <pre><code>&lt;div className="container"&gt;
          &lt;table className="table table-striped"&gt;
          &lt;thead className="thead-dark"&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;id&lt;/th&gt;
              &lt;th scope="col"&gt;Serial Number&lt;/th&gt;
              &lt;th scope="col"&gt;Soft&lt;/th&gt;
              &lt;th scope="col"&gt;Number of Keys&lt;/th&gt;
              &lt;th scope="col"&gt;Company&lt;/th&gt;
              &lt;th scope="col"&gt;City&lt;/th&gt;
              &lt;th scope="col"&gt;Contacts&lt;/th&gt;
              &lt;th scope="col"&gt;Date Created&lt;/th&gt;
              &lt;th scope="col"&gt;Edit&lt;/th&gt;
              &lt;th scope="col"&gt;Delete&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
           &lt;tbody&gt;
              {this.state.hasps.map((hasp, i) =&gt; 
              &lt;TableHasp 
                   delEvent={(hasp) =&gt; this.deleteCurrentHaspInfo(hasp)} 
                   modifyEvent={(id) =&gt; this.modifyCurrentHaspInfo(id)}  
                   key={i} 
                   hasps={hasp} 
                   /&gt;)}
            &lt;/tbody&gt;
           &lt;/table&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>Function that will modify item data:</p>
  
  <pre><code> modifyCurrentHaspInfo = (hasp) =&gt; { 
      this.setState({
        isInEditMode: !this.state.isInEditMode,
        editHasp: hasp
      })   
      console.log(hasp); 
       // if (prompt("Enter password:") === "123456") {
          axios.put("/hasp/change", 
              {
                _id: hasp._id,
                serial: "yyyyy-99000",  //test data
                soft: "test-put3"       //test data
              }            
           )
          .then((res) =&gt; {
            console.log(res.data);      
          })
          .catch((err) =&gt; {
            console.log(err);
          })
       // } else {
        //  alert("Wrong password!");
       // }         
     }
  </code></pre>