React app render function executes before state is set? - reactjs

Question

I am building a chatting app in React, but it crashes right after sending a message. Here is part of the code
state ={
conversationData: null,
message: ''
};
componentDidMount() {
this.setState({conversationData: this.props.conversationData});
};
onSendClicked = () => {
con.addMessage(this.state.conversationData.id, data).then(() => {
this.setState({message: ''}, () => {
this.setState({conversationData: this.state.conversationData.message.push(data)});
});
});
};
and in my render function, I have this
<List>
{this.state.conversationData.message !== null && this.state.conversationData.message !== undefined ?
this.state.conversationData.message.map((mes, index)
........
: <div/>....
The problem is in that loop, it works fine when I load it, but once I press send message and set the state on conversationData, it either returns an empty div and never updates or crashes with .map() is undefined if I eliminate that div. What am I doing wrong?

Answer 1

Based on your current code this is how I would set it up:
state ={
conversationData: this.props.conversationData, // no need to set it as null then update on mount
message: ''
};
onSendClicked = () => {
con.addMessage(this.state.conversationData.id, data).then(() => {
this.setState(({ conversationData }) => ({
message: '',
conversationData: {
...conversationData,
message: [ ...conversationData.message, data ] // where is this data coming from?
} // update conversationData with message
});
};

Answer 2

assuming that 'con' is defined and has a method named 'addMessage' that isn't returning an error
i'm also assuming that you have a type-o and data is being passed in from onSendClicked(data)
then i would do this. take special notice to the spread operator
[...this.state.conversationData.message, data.id]
as opposed to mutating state with .push()
as well as initializing conversationData.message state with an [] to avoid iteration errors on null (check for conversationData.message.length instead of conversationData.message !== null)
state ={
conversationData: {message:[]},
message: ''
};
componentDidMount() {
this.setState({conversationData: this.props.conversationData});
};
onSendClicked = (data) => {
con.addMessage(this.state.conversationData.id, data)
.then(() => {
this.setState({
message: '',
conversationData: [...this.state.conversationData.message, data]
})
});
};
in render:
<List>
{
this.state.conversationData.message.length && this.state.conversationData.message.map((mes, index)=>{
//dosomething with mes and index
})
}
</List>