Add And Remove Data To Table - React
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.
Post a Comment for "Add And Remove Data To Table - React"