Add And Remove Data To Table - React

I'm making a simple name and email list - by table in React. I want to fetch data from server, and next can add or remove persons dynamicly. This is my first steps with React, so I

Solution 1:

I'd rewrite your code as follows.

I will make Form component as uncontrolled component. It means, the form inputs will maintain their own internal states when you change. There is no need to maintain two different sources of data. So I will rely on the parent component App state. I also add a form submit handler which will get the inputs values on submit, and then call the addPerson method from App to add the names to the people state maintained by root component App.

I added the deletePerson method to delete the people from the list. Here are the 2 components looks like.

deletePerson method here relies on the fact that people list will have person with uniq emails. As you also choose it as key props. But you can always change this criterion which will be easy if you understand the current flow of the code.

App.js

importReact, { Component } from"react";
importFormfrom"./Form";

classAppextendsComponent {
  constructor(props) {
    super(props);

    this.state = {
      people: []
    };

    this.addPerson = this.addPerson.bind(this);
    this.deletePerson = this.deletePerson.bind(this);
  }

  addPerson(name, email) {
    this.setState(prevState => ({
      people: [...prevState.people, { name, email }]
    }));
  }

  componentDidMount() {
    this.getPeople();
  }

  getPeople() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(response =>this.setState({ people: response }))
      .catch(error =>console.log(error));
  }

  deletePerson(email) {
    return() => {
      this.setState(prevState => ({
        people: prevState.people.filter(person => person.email !== email)
      }));
    };
  }

  render() {
    console.log(this.state);

    return (
      <divclassName="App"><FormaddPerson={this.addPerson} /><table><thead><tr><th>LP</th><th>USER</th><th>EMAIL</th><th>Actions</th></tr></thead><tbody>
            {this.state.people.map((person, index) => {
              return (
                <trkey={person.email}><th>{index + 1}</th><td>{person.name}</td><td>{person.email}</td><td><buttononClick={this.deletePerson(person.email)}>
                      Delete
                    </button></td></tr>
              );
            })}
          </tbody></table></div>
    );
  }
}

Form.js

importReact, { Component } from"react";

classFormextendsComponent {
  constructor() {
    super();
    this.formSubmit = this.formSubmit.bind(this);
  }

  formSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.elements["email"].value;
    const name = form.elements["name"].value;
    this.props.addPerson(name, email);
    form.reset();
  }

  render() {
    return (
      <formonSubmit={this.formSubmit}><inputid="name"type="text"defaultValue=""placeholder="Name..."
        /><inputid="email"type="text"defaultValue=""placeholder="Email..."
        /><inputtype="submit"value="submit" /></form>
    );
  }
}

exportdefaultForm;

Please check Codesandbox demo.

Solution 2:

You have to create a deletePerson function to your App component, and then pass deletePerson and addPerson as props to your Form component, like this:

<Form addPerson={this.addPerson} deletePerson={this.deletePerson} />

Then make use of them in your Form component.