Hello, im building crud app with react mongoDB node and express. You can add edit and delete student name date of birth and hobby and it works but i need to refresh page after adding or editing student to have updated data on the list i dont know why is doesn’t update automatically.
edit component
import React, { Component } from 'react'
import axios from 'axios'
export default class EditStudent extends Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
dob: '',
hobby: ''
}
}
componentDidMount() {
axios.get('http://localhost:5000/api/students/' + this.props.match.params.id)
.then(response => {
this.setState({
firstName: response.data.firstName,
lastName: response.data.lastName,
dob: response.data.dob,
hobby: response.data.hobby
});
console.log(response)
})
.catch(function (error) {
console.log(error);
})
}
onChangeFirstName = e => {
this.setState({
firstName: e.target.value
});
}
onChangeLastName = e => {
this.setState({
lastName: e.target.value
});
}
onChangeDateOfBirth = e => {
this.setState({
dob: e.target.value
});
}
onChangeHobby = e => {
this.setState({
hobby: e.target.value
});
}
onSubmit = (e) => {
e.preventDefault();
let updatedStudent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
dob: this.state.dob,
hobby: this.state.hobby
};
axios.put('http://localhost:5000/api/students/' + this.props.match.params.id, updatedStudent)
.then(res => console.log(res.data));
this.props.history.push('/');
}
render() {
return (
<div style={{ marginTop: 10 }}>
<h3 align="center">Update Business</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<div className="row">
<div className="col">
<label htmlFor="lastName">First Name: </label>
<input
type="text"
className="form-control"
name="firstName"
id="firstName"
value={this.state.firstName}
onChange={this.onChangeFirstName}
/>
</div>
<div className="col">
<label htmlFor="lastName">Last Name: </label>
<input
type="text"
className="form-control"
name="lastName"
id="lastName"
value={this.state.lastName}
onChange={this.onChangeLastName}
/>
</div>
</div>
</div>
<div className="form-group">
<label htmlFor="dob">Date of birth: </label>
<input
className="form-control"
type="text"
name="dob"
id="dob"
value={this.state.dob}
onChange={this.onChangeDateOfBirth}
/>
</div>
<div className="form-group">
<label htmlFor="hobby">Hobby: </label>
<textarea
className="form-control"
type="text"
name="hobby"
id="hobby"
value={this.state.hobby}
onChange={this.onChangeHobby}
/>
</div>
<div className="form-group">
<label htmlFor="photo">Photo: </label>
<input
className="form-control-file"
type="file"
name="photo"
id="photo"
onChange={this.fileSelectedHandler}
/>
</div>
<input type="submit"
value="Update Business"
className="btn btn-primary" />
</form>
</div>
)
}
}
list component
import React, { Component } from 'react'
import TableRow from '../TableRow/TableRow'
import axios from 'axios'
export default class StudentList extends Component {
constructor(props) {
super(props);
this.state = {
students: []
};
}
componentDidMount() {
axios.get('http://localhost:5000/api/students/')
.then(response => {
this.setState({ students: response.data });
console.log(response);
})
.catch(function (error) {
console.log(error);
})
}
tabRow() {
return this.state.students.map(function (data, i) {
return <TableRow student={data} key={i} />;
});
}
render() {
return (
<div>
<h3 align="center">List of Students</h3>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Hobby</th>
<th>Photo</th>
<th colSpan="2">Action</th>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}