title: Rendering dynamic rows from the input field in REACT
body: <p>Im a newbie to React ,my question is very simple ,I have a form which has a input field which gets some input data and on Submit the form,the input data should render as a row  and delete button which can we delete the data if onClicked .I have implemented the rendering of the rows but there is doubt In deleting functionality.</p>
  <p>the code for App.js file is ,</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  export default class App extends Component {
    state = {
      names: [],
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      let value = document.getElementById(&quot;namevalue&quot;).value;
      const obj = { id: Date.now(), value };
      this.setState({
        names: [obj, ...this.state.names],
      });
      document.getElementById(&quot;myform&quot;).reset();
      
     
      return;
    };
  
    renderTable() {
      return (
        this.state.names &amp;&amp;
        this.state.names.map((name) =&gt; {
          const { id, value } = name; //destructuring
          return (
            &lt;tr key={id}&gt;
              &lt;td&gt;{value}&lt;/td&gt;
              &lt;td&gt;
                &lt;input
                  type=&quot;button&quot;
                  value=&quot;Delete&quot;
                  onClick={this.deleteName(id)}
                /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          );
        })
      );
    }
  
    deleteName = (id) =&gt; {
      console.log(id);
      /* this.setState({
        names: this.setState.names.filter((name) =&gt; name.id !== id),
      });*/
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;form onSubmit={this.handleSubmit} id=&quot;myform&quot;&gt;
            &lt;label&gt;
              Name:
              &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;namevalue&quot; /&gt;
            &lt;/label&gt;
            &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
          &lt;/form&gt;
  
          {/* Table */}
          &lt;br /&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;Names&lt;/th&gt;
                &lt;th&gt;Operation&lt;/th&gt;
              &lt;/tr&gt;
              {/* Render dynamic rows
               */}
              {this.renderTable()}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/&gt;
      );
    }
  }
  
  </code></pre>
  <p>You can see i have implemented the delete method but it throws error
  <a href="https://i.stack.imgur.com/KJm6c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KJm6c.png" alt="The browser output" /></a></p>
  <p>I want to delete the row on clicking the delete button but on clicking the button it throws error as,</p>
  <p><a href="https://i.stack.imgur.com/mWMmD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWMmD.png" alt="Error" /></a></p>