How can I save previous props to be used in componentDidUpdate()? - reactjs

Question

import React, { Component } from "react";
import Sidebar from "../../components/Sidebar";
import API from "../../utils/API";
import PostContainer from "../../components/PostContainer"
import { withRouter } from 'react-router'
import "./index.css";
class Posts extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
carMake: "",
carModel: "",
carYear: 0
};
}
componentDidMount() {
const { carMake, carModel, carYear } = this.props.match.params;
if (carMake && carModel && carYear) {
console.log("component mounted, calling loadPostsMakeModelYear");
console.log(carMake, carModel, carYear);
this.loadPostsMakeModelYear(carMake, carModel, carYear);
} else if (carMake && carModel) {
console.log("component mounted, calling loadPostsMakeModel");
console.log(carMake, carModel, carYear);
this.loadPostsMakeModel(carMake, carModel);
} else if (carMake) {
console.log("component mounted, calling loadPostsMake");
console.log(carMake, carModel, carYear);
this.loadPostsMake(carMake);
} else {
console.log("component mounted, calling loadPosts");
console.log(carMake, carModel, carYear);
this.loadPosts();
}
}
componentDidUpdate() {
//???
}
loadPosts = () => {
API.getAllPosts({})
.then(resp => {
this.setState({
posts: resp.data
});
})
.catch(function (error) {
console.log(error);
});
}
loadPostsMake = (carMake) => {
API.getPostByMake(carMake)
.then(resp => {
console.log("loadPostsMake success");
this.setState({
posts: resp.data,
carMake: ""
});
})
.catch(function (error) {
console.log(error);
});
}
loadPostsMakeModel = (carMake, carModel) => {
API.getPostByMakeModel(carMake, carModel)
.then(resp => {
console.log("loadPostsMakeModel success");
this.setState({
posts: resp.data,
carMake: "",
carModel: ""
})
})
.catch(function (error) {
console.log(error);
});
}
loadPostsMakeModelYear = (carMake, carModel, carYear) => {
API.getPostByMakeModelYear(carMake, carModel, carYear)
.then(resp => {
console.log("loadPostsMakeModelYear success");
this.setState({
posts: resp.data,
carMake: "",
carModel: "",
carYear: 0
})
})
.catch(function (error) {
console.log(error);
});
}
handleInputChange = event => {
const { name, value } = event.target;
console.log("input Changed " + name + " " + value)
this.setState({
[name]: value
});
};
handleFormSubmit = event => {
event.preventDefault();
console.log("Handling form submit");
const { carMake, carModel, carYear } = this.state;
const { history } = this.props
if (carMake && carModel && carYear) {
history.push('/search/' + carMake + '/' + carModel + '/' + carYear)
} else if (carMake && carModel) {
history.push('/search/' + carMake + '/' + carModel)
} else if (carMake) {
history.push('/search/' + carMake)
} else {
history.push('/')
}
}
render() {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<Sidebar
handleInputChange={this.handleInputChange}
handleFormSubmit={this.handleFormSubmit}
/>
</div>
<div className="col-8 offset-1">
{this.state.posts.map(post => (
<PostContainer post={post} />
))}
</div>
</div>
</div>
</div>
);
}
}
export default withRouter(Posts);
I am trying to create a way for users to filter through posts based on 3 different parameters. Depending on how many of the 3 they decide to use, a different API call will be made accordingly. The current code works to bring up all posts on initial render, and the search function works only one time.
If the user attempts to use the search function without returning home, the state and URL update, but the components do not update.
I read that I may be able to use something like componentDidUpdate(), but I don't understand how I can get the previous props, or even the previous state.

Answer 1

componentDidUpdate(prevProps, prevState, snapshot) where prevProps is the props of your component before update, same with the prevState, this.state and this.props are fields of your current component. You can compare them to know you fetched something (prevProps.field !== this.props.field && this.props.field === something good), for example