title: How to only delete one item at a time in ReactJS?
body: <p>I'd like to, when a user deletes on row, for only that row to be deleted. Currently that only happens sometimes. And when you have only two items left to delete, when you click on the delete button, the row's data toggles and replaces itself. It doesn't actually delete.</p>
  
  <ul>
  <li>mainCrud.js - houses the add and delete</li>
  <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><a href="https://codesandbox.io/s/nifty-solomon-2ffvw?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Link to CodeSandbox</a> (tables are under campaigns, dev and news tabs).</p>
  
  <p>Any idea what could be causing this?</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]);
    };
  
    // Delete Project
    const deleteProject = id =&gt; {
      setProject(projectData.filter(project =&gt; project.id !== id));
    };
  
    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} deleteProject={deleteProject} /&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 = {
      id: null,
      name: "",
      description: "",
      date: ""
    };
  
    handleInputChange = e =&gt; {
      let input = e.target;
      let name = e.target.name;
      let value = input.value;
  
      this.setState({
        [name]: value
      });
    };
  
    handleFormSubmit = e =&gt; {
      e.preventDefault();
  
      this.props.addProject({
        id: this.state.id,
        name: this.state.name,
        description: this.state.description,
        date: this.state.date
      });
  
      this.setState({
        // Clear values
        name: "",
        description: "",
        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 })}
              required
            /&gt;
            &lt;input
              name="description"
              type="description"
              placeholder="Description..."
              id="description"
              value={this.state.description}
              onChange={e =&gt; this.setState({ description: e.target.value })}
              required
            /&gt;
            &lt;input
              name="date"
              type="name"
              placeholder="Date..."
              id="date"
              value={this.state.date}
              onChange={e =&gt; this.setState({ date: e.target.value })}
              required
            /&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
                          onClick={() =&gt; props.deleteProject(project.id)}
                          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>