Pfthb

A little confused here. I've got an App component that does a get API request to populate the page with property cards. My Properties component renders a sidebar to filter those cards. The links within that sidebar are making the right API calls, and getting the right response – but that response isn't causing the App component to re-render with fewer properties.

I presume I need a ComponentDidUpdate method in App, or to expand the ComponentDidUpdate method in Properties, but I'm not sure which. Can someone point me in the right direction?

App component

class App extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 properties: ,
 ;
 

 componentDidMount() 
 Axios.get('http://localhost:3000/api/v1/PropertyListing')
 .then((response) => 
 this.setState(
 properties: response.data,
 );
 );
 

 render() 
 return (
 <div className="navigation">
 <NavBar />
 <Switch>
 <Route exact path="/" component=Properties />
 <Route exact path="/add-property" component=AddProperty />
 </Switch>
 <PropertyCards
 properties=this.state.properties
 />
 </div>
 );
 

Properties component

class Properties extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 properties: ,
 ;
 

 componentDidUpdate(prevProps) 
 const search = this.props.location;

 if (prevProps.location.search !== search) 
 Axios.get(`http://localhost:3000/api/v1/PropertyListing$search`)
 .then(( data: properties ) => this.setState( properties ))
 .catch(err => console.error(err));
 
 

 render() 
 return (
 <div className="sidebar">
 <h4>Filter by city</h4>
 <div className="filters">
 <Link className="filter" to='/?query="city":"Manchester"'>Manchester</Link>
 <Link className="filter" to='/?query="city":"Leeds"'>Leeds</Link>
 <Link className="filter" to='/?query="city":"Sheffield"'>Sheffield</Link>
 <Link className="filter" to='/?query="city":"Liverpool"'>Liverpool</Link>
 </div>
 </div>
 );
 

In general it would be a good idea to move the second api request up intro your parent component, so you 'Properties' component becomes a 'dumb' component which only renders ui according to the data that is passed. That way you don't have to maintain multiple states.

In that context it would definitely make sense to move ComponentDidUpdate() to your 'App' component as well.