title: Adding values from inputs as new table row in ReactJS
body: <p>I'd like to grab the values from input fields, and place in the table beneath it.</p>
  
  <ul>
  <li>crudAdd.js - defines state, event handlers, renders the form itself</li>
  <li>crudTable.js - maps pre-defined rows defined in mainCrud.js, renders the table itself</li>
  </ul>
  
  <p>Trying to figure out how to hook up crudAdd.js and crudTable.js, for crudAdd.js to ultimately push the values from the inputs to the table.</p>
  
  <p><a href="https://codesandbox.io/s/nifty-solomon-2ffvw?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Link to CodeSandbox</a> (form is under campaigns, dev and news tabs).</p>
  
  <p>MainCrud.js</p>
  
  <pre><code>import React, { useState } from "react";
  
  import CrudIntro from "../crud/crudIntro/crudIntro";
  import CrudAdd from "../crud/crudAdd/crudAdd";
  import CrudTable from "../crud/crudTable/crudTable";
  
  const MainCrud = props =&gt; {
    // Project Data
    const projectData = [
      {
        id: 1,
        name: "Skid Steer Loaders",
        description:
          "To advertise the skid steer loaders at 0% financing for 60 months.",
        date: "February 1, 2022"
      },
      {
        id: 2,
        name: "Work Gloves",
        description: "To advertise the work gloves at $15.",
        date: "February 15, 2022"
      },
      {
        id: 3,
        name: "Telehandlers",
        description: "To advertise telehandlers at 0% financing for 24 months.",
        date: "March 15, 2022"
      }
    ];
  
    const [projects, setProject] = useState(projectData);
  
    // Add Project
    const addProject = project =&gt; {
      project.id = projectData.length + 1;
      setProject([...projects, project]);
    };
  
    return (
      &lt;div&gt;
        &lt;section id="add"&gt;
          &lt;CrudIntro title={props.title} subTitle={props.subTitle} /&gt;
          &lt;CrudAdd addProject={addProject} /&gt;
        &lt;/section&gt;
        &lt;section id="main"&gt;
          &lt;CrudTable projectData={projects} /&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    );
  };
  
  export default MainCrud;
  </code></pre>
  
  <p>CrudAdd.js</p>
  
  <pre><code>import React, { Component } from "react";
  
  import "../crudAdd/crud-add.scss";
  import "../../button.scss";
  
  class CrudAdd extends Component {
    state = {
      name: "",
      description: "",
      date: "",
      items: []
    };
  
    handleInputChange = e =&gt; {
      let input = e.target;
      let name = e.target.name;
      let value = input.value;
  
      this.setState({
        [name]: value
      });
      // console.log(e.target.value);
    };
  
    handleFormSubmit = e =&gt; {
      e.preventDefault();
  
      let items = [...this.state.items];
  
      items.push({
        name: this.state.name,
        description: this.state.description,
        date: this.state.date
      });
  
      this.setState({
        // Clear values
        name: "",
        description: "",
        date: ""
      });
  
      console.log(this.state.name);
      console.log(this.state.description);
      console.log(this.state.date);
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleFormSubmit}&gt;
            &lt;input
              name="name"
              type="name"
              placeholder="Name..."
              id="name"
              value={this.state.name}
              onChange={e =&gt; this.setState({ name: e.target.value })}
            /&gt;
            &lt;input
              name="description"
              type="description"
              placeholder="Description..."
              id="description"
              value={this.state.description}
              onChange={e =&gt; this.setState({ description: e.target.value })}
            /&gt;
            &lt;input
              name="date"
              type="name"
              placeholder="Date..."
              id="date"
              value={this.state.date}
              onChange={e =&gt; this.setState({ date: e.target.value })}
            /&gt;
            &lt;button type="submit" className="btn btn-primary"&gt;
              Add Project
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CrudAdd;
  </code></pre>
  
  <p>CrudTable.js</p>
  
  <pre><code>import React, { Component } from "react";
  
  import "../crudTable/crud-table.scss";
  
  class CrudTable extends Component {
    render() {
      const props = this.props;
      return (
        &lt;div&gt;
          &lt;div class="table-responsive"&gt;
            &lt;table class="table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th scope="col"&gt;Project Name&lt;/th&gt;
                  &lt;th scope="col"&gt;Project Description&lt;/th&gt;
                  &lt;th scope="col"&gt;Date&lt;/th&gt;
                  &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {props.projectData.length &gt; 0 ? (
                  props.projectData.map(project =&gt; (
                    &lt;tr key={project.id}&gt;
                      &lt;td&gt;{project.name}&lt;/td&gt;
                      &lt;td&gt;{project.description}&lt;/td&gt;
                      &lt;td&gt;{project.date}&lt;/td&gt;
                      &lt;td&gt;
                        &lt;button className="btn btn-warning"&gt;Edit&lt;/button&gt;
                        &lt;button className="btn btn-danger"&gt;Delete&lt;/button&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  ))
                ) : (
                  &lt;tr&gt;
                    &lt;td&gt;No projects found. Please add a project.&lt;/td&gt;
                  &lt;/tr&gt;
                )}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CrudTable;
  </code></pre>