title: making fields editable in row in reactjs
body: <p>As of now when I was clicking on the <code>edit icon</code>, a <code>form</code> was getting opened and we used to change the data and <code>save</code> it.
  but now I have a requirement in which once user <code>click</code> on edit icon the same <code>row</code> ,other than <code>certificateNo</code> should be <code>editable</code>. and <code>edit</code> button should be replaced by <code>save</code>. and user can save data there,without going to any other page.</p>
  <p>How to approach that? any suggestions?</p>
  <pre><code> &lt;tbody&gt;
  
       {response.map((certificate: Certificate,index:number) =&gt; {
              return (
                 &lt;tr key={certificate.certificateNo}&gt;
                 &lt;td&gt;{certificate.certificateNo}&lt;/td&gt;
                 &lt;td&gt;{certificate.sponser}&lt;/td&gt;
                 &lt;td&gt;{certificate.protoColNo}&lt;/td&gt;
                 &lt;td&gt;{certificate.startDate}&lt;/td&gt;
                 &lt;td&gt;{certificate.endDate}&lt;/td&gt;
                 &lt;td&gt;{certificate.noOfSubjects}&lt;/td&gt;
                 &lt;td&gt;{certificate.country}&lt;/td&gt;
                 &lt;td&gt;{certificate.requestStatus}&lt;/td&gt;
                 &lt;td&gt;
             &lt;div className=&quot;btn-group mr-2&quot;&gt;
                 &lt;button className=&quot;btn btn-sm btn-outline-secondary&quot; onClick={()=&gt;updateCertificate(certificate,index)}&gt;
                 &lt;i className=&quot;bi bi-pencil&quot;&gt;&lt;/i&gt;
                 &lt;/button&gt;
            &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MD6mo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MD6mo.png" alt="enter image description here" /></a></p>