Hello I’m building simple app that has a list of shipments pulled from json server fake db and after clicking item on the list detail page appears and i have method to update one field (shipment name) i used patch method and it works but after closing modal my name don’t update immediatelly on the detail page i tried componentdidupdate but im doing something wrong.
export default class ShipmentsDetails extends Component {
constructor(props) {
super(props);
this.state = {
shipment: [],
openModal: false,
error: null,
isLoading: false,
name: ''
}
}
componentDidMount() {
this.setState({
isLoading: true
})
const id = this.props.match.params.id;
fetch(`http://localhost:3001/shipments/${id}`)
.then(res => res.json())
.then(data => {
this.setState((state) => ({
shipment: data,
isLoading: false
}))
})
.catch(err => {
this.setState({
error: err
})
})
}
componentDidUpdate(prevProps, prevState) {
if (this.state.shipment !== prevState.shipment) {
this.setState({ shipment: this.state.shipment });
}
}
showModal = () => {
this.setState({
openModal: true
})
}
hideModal = ()=> {
this.setState({
openModal: false
})
}
handleChange = event => {
this.setState({
name: event.target.value
})
}
handleSave = () => {
const name = this.state.name;
const id = this.props.match.params.id
axios.patch(`http://localhost:3001/shipments/${id}`, {name})
.then(res => console.log(res.data));
this.setState({
name: '',
openModal: false
})
this.hideModal()
}
on detail page i have button to open modal with input to update name after clicking submit it change name but its nut updated on the detail page, but when i come back to list page the list is updated.