title: convert react class-based to functional component
body: <p>I am new to learning react and I am having a tough time converting class components into functional components for understanding problems and analyzing . I want to use functional approach for understanding states and life cycle methods how that works in hooks concept .</p>
  <p>How we can achieve this?</p>
  <p><strong>my code in class are</strong></p>
  <pre><code>export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
    
  
      flag: false,
        fields: [],
        Namefield: { value: '', error: '' },
        Emailfield: { value: '', error: '' },
        Mobilefield: { value: '', error: '' },
        tablerows: []
      };
      this.handleName = this.handleName.bind(this);
      this.handleMobile = this.handleMobile.bind(this);
      this.handleMail = this.handleMail.bind(this);
      this.addRow = this.addRow.bind(this);
    }
    handleName(e) {
      this.setState({
        Namefield: {
          value: e.target.value,
          error: false
        }
      })
    }
    handleMobile(e) {
      this.setState({
        Mobilefield: {
          value: e.target.value,
          error: false
        }
      })
    }
    handleMail(e) {
      this.setState({
        Emailfield: {
          value: e.target.value,
          error: false
        }
      })
    }
  
    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
      this.setState({ tablerows: this.state.tablerows.concat(newdata), flag: true });
  
      const name1 = this.state.Namefield;
      const mob1 = this.state.Mobilefield;
      const mail1 = this.state.Emailfield;
  
      if (name1.value !== &quot;&quot;) {
        const newName = [...this.state.fields, name1]
        this.setState({
          fields: newName,
          Namefield: {
            value: '',
            error: ''
          }
        })
      }
  
      if (mob1.value !== &quot;&quot;) {
        const newMob = [...this.state.fields, mob1]
        this.setState({
          fields: newMob,
          Mobilefield: {
            value: '',
            error: ''
          }
        })
      }
  
      if (mail1.value !== &quot;&quot;) {
        const newMail = [...this.state.fields, mail1]
        this.setState({
          fields: newMail,
          Emailfield: {
            value: '',
            error: ''
          }
        })
      }
  
    }
  
    deleteRow(passedID) {
      let tablerows = [...this.state.tablerows]
      tablerows.splice(passedID, 1)
      this.setState({
        tablerows: tablerows
      })
    }
  
    editRow = (index, type, values) =&gt; {
  
      const newState = this.state.tablerows.map((item, i) =&gt; {
        if (i === index) {
          return { ...item, [type]: values };
        }
        return item;
      });
      this.setState({
        tablerows: newState
      });
  
    }
  
    render() {
  
      return (
        &lt;div className=&quot;App&quot;&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={this.state.Namefield.value}
              onChange={this.handleName} /&gt;       &lt;br /&gt;
            &lt;input
              type=&quot;number&quot;
              placeholder=&quot;Mobile&quot;
              maxLength=&quot;10&quot;
              value={this.state.Mobilefield.value}
              onChange={this.handleMobile} /&gt;          &lt;br /&gt;
            &lt;input
              type=&quot;email&quot;
              placeholder=&quot;Email&quot;
              value={this.state.Emailfield.value}
              onChange={this.handleMail} /&gt;          &lt;br /&gt;
            &lt;div&gt;
              &lt;button onClick={this.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; this.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; this.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; this.editRow(index, &quot;mail&quot;, e.target.value)} /&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;button className=&quot;deleteBtn&quot; onClick={() =&gt; this.deleteRow(index)}&gt;-&lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;)}
              &lt;/tbody&gt;
            &lt;/table&gt; : &quot;&quot;}
        &lt;/div&gt;
      );
    }}
  </code></pre>