title: class based to functional component react
body: <p>just stuck on this while converting class base component to functional base component in react js? having difficulty on following this link example  :
  <a href="https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks" rel="nofollow noreferrer">https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks</a><br />
  for convertion?</p>
  <p><strong>code</strong>
  import React,{useState} from 'react'</p>
  <pre><code>    function Rowadd() {
          const [state, setState] = useState({
              flag: false,
              fields: [],
              Namefield: { value: '', error: '' },
              Emailfield: { value: '', error: '' },
              Mobilefield: { value: '', error: '' },
              tablerows: []
            });
            const handleName = (e) =&gt; {
              setState({
              ...state,
              Namefield: {
                value: e.target.value,
                error: false
              }
            })
      
          };
          const handleMobile = (e) =&gt; {
              setState({
              ...state,
              Mobilefield: {
                value: e.target.value,
                error: false
              }
            })
      
          };
          const handleMail = (e) =&gt; {
              setState({
              ...state,
              Emailfield: {
                value: e.target.value,
                error: false
              }
            })
      
          };
      
          const addRow(e) 
          {
          e.preventDefault();
              var newdata = { name: this.state.Namefield.value, mobile: this.state.Mobilefield.value, mail: this.state.Emailfield.value }
              // //take the existing state and concat the new data and set the state again
              setState({ tablerows: state.tablerows.concat(newdata), flag: true });
          
              const name1 = state.Namefield;
              const mob1 = state.Mobilefield;
              const mail1 = state.Emailfield;
          
              if (name1.value !== &quot;&quot;) {
                const newName = [...state.fields, name1]
                this.setState({
                  fields: newName,
                  Namefield: {
                    value: '',
                    error: ''
                  }
                })
              }
          
              if (mob1.value !== &quot;&quot;) {
                const newMob = [...state.fields, mob1]
                setState({
                  fields: newMob,
                  Mobilefield: {
                    value: '',
                    error: ''
                  }
                })
              }
          
              if (mail1.value !== &quot;&quot;) {
                const newMail = [...state.fields, mail1]
                setState({
                  fields: newMail,
                  Emailfield: {
                    value: '',
                    error: ''
                  }
                })
              }
          
            }
          
            deleteRow(passedID) 
            {
              let tablerows = [...state.tablerows]
              tablerows.splice(passedID, 1)
              setState({
                tablerows: tablerows
              })
            }
          
            editRow = (index, type, values) =&gt; {
          
              const newState = tablerows.map((item, i) =&gt; {
                if (i === index) {
                  return { ...item, [type]: values };
                }
                return item;
              });
              this.setState({
                tablerows: newState
              });
          
            }
      
          return (
              &lt;div&gt;
      &lt;header className=&quot;App-header&quot;&gt;Sample CRUD Operations&lt;/header&gt;
              &lt;form &gt;
                &lt;input
                  type=&quot;text&quot;
                  placeholder=&quot;Name&quot;
                  value={state}
                  onChange={handleName} /&gt;       &lt;br /&gt;
                &lt;input
                  type=&quot;number&quot;
                  placeholder=&quot;Mobile&quot;
                  maxLength=&quot;10&quot;
                  value={state}
                  onChange={handleMobile} /&gt;          &lt;br /&gt;
                &lt;input
                  type=&quot;email&quot;
                  placeholder=&quot;Email&quot;
                  value={state.Emailfield}
                  onChange={handleMail} /&gt;          &lt;br /&gt;
                &lt;div&gt;
                  &lt;button onClick={addRow}&gt;ADD&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
      
              {this.state.tablerows.length &gt; 0 ?
                &lt;table style={{ &quot;backgroundColor&quot;: &quot;rgb(192, 217, 236)&quot; }}&gt;
                  &lt;thead style={{ &quot;backgroundColor&quot;: &quot;rgb(73, 116, 201)&quot;, &quot;color&quot;: &quot;white&quot; }}&gt;
                    &lt;tr style={{ &quot;height&quot;: &quot;50px&quot; }}&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Mobile&lt;/th&gt;
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;Delete&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    {this.state.tablerows.map((row, index) =&gt;
                      &lt;tr key={index}&gt;
                        &lt;td&gt; &lt;input
                          type=&quot;text&quot;
                          value={row.name}
                          onChange={(e) =&gt; editRow(index, &quot;name&quot;, e.target.value)} /&gt;&lt;/td&gt;
                        &lt;td&gt; &lt;input
                          type=&quot;number&quot;
                          maxLength=&quot;10&quot;
                          value={row.mobile}
                          onChange={(e) =&gt; editRow(index, &quot;mobile&quot;, e.target.value)} /&gt;&lt;/td&gt;
                        &lt;td&gt; &lt;input
                          type=&quot;email&quot;
                          value={row.mail}
                          onChange={(e) =&gt; editRow(index, &quot;mail&quot;, e.target.value)} /&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;button className=&quot;deleteBtn&quot; onClick={() =&gt; deleteRow(index)}&gt;-&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;)}
                  &lt;/tbody&gt;
                &lt;/table&gt; : &quot;&quot;}
            &lt;/div&gt;
          );
      
      }
      
      export default Rowadd
  </code></pre>