How to set an initial API call in react ES6 - reactjs

Question

So the problem is as follows: I have a search function that get's an default value passed on from another place, the search works, but only when it gets a new input, hence if I'm passing "Dress" it wont call my api function before i change something in the input.
I've tried a bit of everything like setInitialState(), but without any noteworthy success.
As you can see I'm getting a onTermChange from my Searchbar that's passed to handleTermChange which then updates my products:[], but I need this.props.location.query to be the default search term, as this is the passed on variable.
handleTermChange = (term) => {
const url = `http://localhost:3001/products?title=${term.replace(/\s/g, '+')}`;
request.get(url, (err, res) => {
this.setState({ products: res.body })
});
};
render () {
return (
<div className='col-md-12' style={{ margin: '0 auto' }}>
<div className='row searchPageHeader' style={{ padding: '10px', backgroundColor: '#1ABC9C' }}/>
<SideMenu />
<SearchBar onTermChange={this.handleTermChange}
defaultValue={this.props.location.query}/>
<ProductList products={this.state.products}
onProductSelect={selectedProduct => this.openModal(selectedProduct)}/>
<ProductModal modalIsOpen={this.state.modalIsOpen}
selectedProduct={this.state.selectedProduct}
onRequestClose={ () => this.closeModal() }/>
<Footer />
</div>
);
}

Answer 1

I would personally just do the same logic in componentDidMount(), like this:
componentDidMount () {
const url = `http://localhost:3001/products?title=${this.props.location.query}`;
request.get(url, (err, res) => {
this.setState({ products: res.body })
});
}
Note that since you are doing an asynchronous call products won't be populated from the API result until a moment after the component is mounted. Make sure you initialize products in initialState (I assume this returns an array, so initialize it as an empty array).
Opinion: Since you are following the event handler naming conventions (i.e onX followed by handleX) I would avoid calling handleTermChange() inside componentDidMount() because the function name suggests it's bound to an event listener. So calling it directly is just bad practice in my opinion. So if you'd rather call a function in here, rather than writing out the logic like I did above, I would do the following:
componentDidMount() {
this.changeTerm(this.props.location.query);
}
changeTerm = (term) => {
const url = `http://localhost:3001/products?title=${term.replace(/\s/g, '+')}`;
request.get(url, (err, res) => {
this.setState({ products: res.body })
});
};
handleTermChange = (term) => {
this.changeTerm(term);
}
Your render() remains unchanged. Maybe a stretch, but I prefer it this way.