Adding values from inputs as new table row in ReactJS

Question

I'd like to grab the values from input fields, and place in the table beneath it.

• crudAdd.js - defines state, event handlers, renders the form itself
• crudTable.js - maps pre-defined rows defined in mainCrud.js, renders the table itself

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.

Link to CodeSandbox (form is under campaigns, dev and news tabs).

MainCrud.js

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 => {
  // 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 => {
    project.id = projectData.length + 1;
    setProject([...projects, project]);
  };

  return (
    <div>
      <section id="add">
        <CrudIntro title={props.title} subTitle={props.subTitle} />
        <CrudAdd addProject={addProject} />
      </section>
      <section id="main">
        <CrudTable projectData={projects} />
      </section>
    </div>
  );
};

export default MainCrud;

CrudAdd.js

import React, { Component } from "react";

import "../crudAdd/crud-add.scss";
import "../../button.scss";

class CrudAdd extends Component {
  state = {
    name: "",
    description: "",
    date: "",
    items: []
  };

  handleInputChange = e => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    });
    // console.log(e.target.value);
  };

  handleFormSubmit = e => {
    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 (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <input
            name="name"
            type="name"
            placeholder="Name..."
            id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
          <input
            name="description"
            type="description"
            placeholder="Description..."
            id="description"
            value={this.state.description}
            onChange={e => this.setState({ description: e.target.value })}
          />
          <input
            name="date"
            type="name"
            placeholder="Date..."
            id="date"
            value={this.state.date}
            onChange={e => this.setState({ date: e.target.value })}
          />
          <button type="submit" className="btn btn-primary">
            Add Project
          </button>
        </form>
      </div>
    );
  }
}

export default CrudAdd;

CrudTable.js

import React, { Component } from "react";

import "../crudTable/crud-table.scss";

class CrudTable extends Component {
  render() {
    const props = this.props;
    return (
      <div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Project Description</th>
                <th scope="col">Date</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {props.projectData.length > 0 ? (
                props.projectData.map(project => (
                  <tr key={project.id}>
                    <td>{project.name}</td>
                    <td>{project.description}</td>
                    <td>{project.date}</td>
                    <td>
                      <button className="btn btn-warning">Edit</button>
                      <button className="btn btn-danger">Delete</button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td>No projects found. Please add a project.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default CrudTable;

Answer 1

Here's the code that worked for me in your sandbox:

  handleFormSubmit = e => {
    e.preventDefault();

    this.props.addProject({
      name: this.state.name,
      description: this.state.description,
      date: this.state.date
    });

    this.setState({
      name: "",
      description: "",
      date: ""
    });
  };

Here's the explanation:

What you're talking about is sibling-sibling communication between components. There are a number of helpful articles and approaches. Fundamentally, vanilla React wants you to use props as inputs to your components, and handle output with functions that are passed in as props.

One way to do this would be to define the table component's data in its parent, and write a method in the parent component to modify this data. Pass the function to the add child component, and pass the data to the table component. Then, when add calls the function, it modifies the data in the parent. The parent's state data being modified will cause the child to re-render with the new data!