title: ReactJS: How do I add a new row to table from Form input values?
body: <p>I'm learning ReactJS.</p>
  
  <p>I'd like to add text into a input field and then click a submit button. this new value is add to a table.</p>
  
  <p>I've started with a simple form component that has input values first name and last name. A table component that extends the form. the form added to the default App class.</p>
  
  <p>Form.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './form.css';
  
  export default class Form extends Component {
  
  
    render(){
        return(
          &lt;div id="Form"&gt;
  
            &lt;form onSubmit={this.handleSubmit}&gt;
                Username&lt;br/&gt;
                &lt;input type="text" name="username" placeholder="Username" /&gt;&lt;br/&gt;
                Password&lt;br/&gt;
                &lt;input type="password" name="password" placeholder="Password"/&gt;&lt;br/&gt;
                &lt;br/&gt;
                &lt;input type="submit" value="Submit" /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        );
      }
  
  }
  </code></pre>
  
  <p>Table.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './table.css';
  import Form from './Form.js';
  
  export default class Table extends Form {
    render(){
        return(
          &lt;div id="Table"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;th&gt;Username&lt;/th&gt;
                &lt;th&gt;Password&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;a&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
            &lt;/table&gt;
          &lt;/div&gt;
        );
      }
  
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import Table from './Table.js';
  import Form from './Form.js';
  import './App.css';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Form /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>