Rerender another component when the state is changed - reactjs

Question

I want to rerender my another component when the state is changed. I've conditional components. One of them is related to input in my main component. It is rendered in the first place but I cant rerender it when I change the input value (also state value). The component is SearchGifList
import React from 'react';
import logo from './logo.svg';
import './App.css';
import TrendingGifList from './TrendingGifList';
import SearchGifList from './SearchGifList';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
search: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.setState({
search : true,
})
}
getTrendingGifs = () => {
this.setState({
search : false,
value: ''
})
}
getComponent = () => {
if(this.state.search) {
return <SearchGifList value={this.state.value} />
}
else {
return <TrendingGifList />
}
}
render() {
return (
<>
<div>
<a onClick={this.getTrendingGifs}>Logo</a>
<form onSubmit={this.handleSubmit}>
<input className="input-search" type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit" >Search</button>
</form>
</div>
<div>
{this.getComponent()}
</div>
</>
);
}
}
export default App;
SearchGifList Component code:
import React, { Component } from 'react';
import Masonry from 'react-masonry-css';
import {API_KEY, API_URL_search} from './constants'
class SearchGifList extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: [],
breakpointColumnsObj : {
default: 4,
1100: 3,
700: 2,
500: 1
},
offset: 0,
limit: 20,
api_key: API_KEY,
total_count: 0,
value: this.props.value
};
}
searchGifs = () => {
fetch( API_URL_search +
"?q=" + this.state.value +
"&api_key=" + this.state.api_key +
"&limit=" + this.state.limit +
"&offset=" + this.state.offset)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: (this.state.items).concat(result.data),
total_count: result.pagination.total_count,
offset : this.state.offset + 20
});
},
(error) => {
this.setState({
isLoaded: true,
error : 'Somethings went wrong to search gifs.'
});
}
)
}
componentDidMount() {
this.searchGifs();
}
loadMore = () => {
if(this.state.offset < this.state.total_count){
this.setState({
offset : this.state.offset + 20
});
}
this.searchGifs();
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<>
<Masonry
breakpointCols={this.state.breakpointColumnsObj}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
>
{items.map(item => (
<div className="gif-container" >
<img className="gif-preview" height={item.images.fixed_width.height} src={item.images.fixed_width.webp} alt="giphy baby" />
</div>
))}
</Masonry>
<button onClick={this.loadMore}>Load More</button>
</>
);
}
}
}
export default SearchGifList;

Answer 1

It should render content after changing state. Here is an similar example I have created for you now. https://codesandbox.io/embed/example-ys041
Please check it I think that will help you a lot.
If still you are not getting any idea then send me the your example via codesandbox I will check it for you.
Thanks

Answer 2

I solved the problem componentDidUpdate() method:
componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
setTimeout(() => {
this.setState({
items: [],
offset: 0
}, function(){
this.searchGifs();
});
}, 10)
}
}
Thank you for all answers