ComponentWillReceiveProps doesn't update the state first time - reactjs

Question

My render method is as follows
render() {
const language = this.props.language.default.portal;
const currentUserEmail = getUserEmail();
let cars = carData.filterCars(this.props.carsToShow, this.props.filters);
return (
<div className="contentRight noPadding col-xl-10 col-lg-10 col-md-10 col-sm-9 col-xs-7">
<div className="cars" style={{position: 'relative'}}>
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div>
{this.showMsg(cars)}
<Shuffle>
{cars.map((car, i) => {
const initialReg = car.initialRegistration.slice(0,3) + car.initialRegistration.slice(6,10);
// str.slice(1, 4) extracts the second character through the fourth character (characters indexed 1, 2, and 3)
return (
<div key={car.chassis} className="carBox noPadding" style={{position: "relative"}}>
<div className="carBoxContent">
<PhotoAndFavorites car={car} language={language} favoriteActions={this.props.actionFavorites} favorites={this.props.favorites}/>
<div className="carNameAndDesc">
<div><Link to="" style={{textDecoration: 'none'}}>{car.make} {car.model}</Link></div>
<div>{car.desc}</div>
</div>
<div className="carPrice">
<div>{car.price}</div>
<div>{car.btw}</div>
</div>
<div className="extraFeatures" style={{marginBottom: 5, backgroundColor: '#eee'}}>
</div>
<div className="mainFeatures">
<div><img src="../images/portal/user/status/fuel-icon.png" style={{height: 12}}/> <span>{car.fuel}</span></div>
<div><img src="../images/portal/user/status/road-icon.png" style={{height: 12}}/> <span>{car.mileage}</span></div>
<div><img src="../images/portal/user/status/calendar-icon.png" style={{height: 12}}/> <span>{initialReg}</span></div>
</div>
<MakeOfferButton{...this.props} car={car}/><
</div>
</div>
);
})}
</Shuffle>
</div>
</ReactCSSTransitionGroup>
<div className="clearfix"/>
</div>
</div>
);
}
Redux connect is as follows :
function mapStateToProps(state, ownProps){
return {
filters: state.filters,
favorites: state.favorites,
carsToShow: state.carsToShow,
carsInCart: state.cart
};
}
function mapDispatchToProps(dispatch){
return {
actionFavorites: bindActionCreators(actionFavorites, dispatch),
actionsCart: bindActionCreators(actionCart, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(cars);
MakeOfferButton component is as follows :
import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import FontAwesome from 'react-fontawesome';
import {getUserEmail} from '../../../../components/homepage/login/getUserInfo';
import {cart_types} from './cars';
export default class MakeOffer extends React.Component {
constructor(props){
super(props);
this.state = {
offer: ""
}
}
componentWillReceiveProps(nextProps){
const car = this.props.car;
const userEmail = getUserEmail();
let offer = "";
if(nextProps.carsInCart.some(i => i.info.carID == car.id && i.info.user == userEmail)){
offer = parseInt(nextProps.carsInCart.filter(i => i.info.carID == car.id && i.info.user == userEmail).map(c => c.info.offer)[0]);
}
this.setState({offer: offer});
}
makeAnOffer(car, userEmail, event){
let dataToAdd = {type: cart_types.offer, info: {carID: car.id, user: userEmail, offer: this.state.offer}};
this.props.actionsCart.addToCart(dataToAdd);
}
removeOffer(car, userEmail, event){
let dataToRemove = {info: {carID: car.id, user: userEmail}};
this.props.actionsCart.removeFromCart(dataToRemove);
}
handleOfferChange(event){
(event.target.value < 1 ) ? this.setState({offer: ""}) : this.setState({offer: event.target.value});
}
render(){
const language = this.props.language;
const car = this.props.car;
const userEmail = getUserEmail();
return (
<div className="addToCardButton">
<div className="offerButtons" style={{postion: "relative"}}>
<button type="reset" className="btnReset" onClick={this.removeOffer.bind(this, car, userEmail)}><FontAwesome name="times"/></button>
<input type="number" pattern="[0-9]*" inputMode="numeric" placeholder="Your offer..." className="offerInput" value={this.state.offer} onChange={this.handleOfferChange.bind(this)}/>
<button type="submit" className="btnSubmit" onClick={this.makeAnOffer.bind(this, car, userEmail)}><FontAwesome name="check"/></button>
</div>
</div>
);
}
};
The problem is in MakeOfferButton component. The redux action is called when I call makeAnOffer function. That works fine.
But then componentWillReceiveProps should get the new props and update the state offer. And then that state should be shown in my input. But that isn't happening.
When I click on the second one, then it is shown. The first one and also the second one.
Why the state isn't showing first time?
Any advice?