react.js why component doesn't rerender immediately after changing props

Question

I got component named App, which has a button that provides data by prop for component named Forecast

<form onSubmit={this.searchFor}>
  <input type="text" placeholder="Enter localization" ref={(input) => { this.textInput = input; }}/>
  <button onClick={this.searchFor}>Check!</button>
  <button onClick={this.getCoords}>Find me!</button> 
</form>
{weatherInfo && <Forecast forecastData={weatherInfo}/> }

after Check! button is clicked , api call is done and weatherInfo state is set , so therefore Forecast component is being load with the data from state. Forecast comp without unnecessary details looks as beneath:

displayInfo(weatherInfo) {
const {displayItemTo,displayItemFrom} = this.state;
let {displayItems} = this.state;

displayItems = weatherInfo.list.filter((item, idx) => {
    return idx < displayItemTo && idx >= displayItemFrom;
        }).map((item,idx) =>{
            return [
                    <td>{new Date(item.dt_txt.slice(0,10)).getDay()}</td>,
                    <td>{item.dt_txt.slice(0,10)}</td>,
                    <td>{item.dt_txt.slice(11,19)}</td>,
                    ... and few more <td>
    });
this.setState({
        displayItems:displayItems[0].map((col, i) => displayItems.map(row => row[i])) 
});}  

Basically displayInfo is preparing data , which will be mapped later

and here are lifecycle methods , which i think are troublemakers

componentDidMount(){
    this.displayInfo(this.props.forecastData);
}

componentWillReceiveProps(nextProps){
    if(this.props.forecastData !== nextProps){
        this.displayInfo(this.props.forecastData);
    }
}

and the render func below:

render(){
const weatherInfo = this.props.forecastData,
        rowNames = ['day','data','hour','temp','humidity','conditions','','windspd','winddir'],
        {displayItemTo,displayItemFrom,displayItems} = this.state

console.log(displayItems);
return(
    <div className="tableBox">
    <div className="back"></div>
    <table>
        <caption>{weatherInfo.city.name + " , "  + weatherInfo.city.country}</caption>
        <tbody>
            {displayItems.map((item,idx) =>{
                return <tr key={idx}><td key={'rowName'+idx}>{rowNames[idx]}</td>{[...item]}</tr> 
            })}
        </tbody>

and the issue is that , when i enter localization and click for first time everything is rendering perfectly but when the component is mounted and i am clicking 'Check!' btn(with other input val) once ,prop named forecastData is being changed so as caption in table. but all table cells stays with old values until i will click the 'Check!' btn again (second time) with same input value for a second time than their values are being updated , just what i did expected after clicking once not twice.

Answer 1

Change your code to this. You are supposed to re-render using the new props data.

componentWillReceiveProps(nextProps){
    if(this.props.forecastData !== nextProps.forecastData){
        this.displayInfo(nextProps.forecastData);
    }
}