Update Passed Data from Parent to Child After Axios Request React - reactjs

Question

From the title itself. I am fairly new to react and would like to know
how would you update the already "passed" data from parent to child. I have an alert component that will display the error message depending on the data acquired after an Axios request.
Parent
..
this.state = {
formContact: {
fullname: '',
contact:'',
email: '',
message: ''
},
formAlert: { alertMessage: 'default'}
};
handleClick() {
let rm = this;
axios({
method: 'post',
url: 'submit',
data: {
form: this.state.formContact
}
})
.then(function (response) {
let data = response.data.data;
rm.setState({
formAlert: { alertMessage: 'test' }
});
}).catch(function (response) {
//handle error
console.log(response);
});
}
render() {
return (
<div className="row">
<Alert data={this.state.formAlert} />
</div>
);
}
}
Child
class Alert extends Component {
constructor(props) {
super(props);
console.log(props);
// Holds the form state and input boxes
this.state = {
formError: {
icon: '',
header: '',
message: '',
errorType: 'errormsg'
}
};
}
render() {
return (
<div className={'style-msg ' + this.state.formError.errorType}>
<div className="sb-msg"><i className="icon-thumbs-up"></i>
<strong>Well done!</strong>
{this.state.formError.message}
</div>
<button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
);
}
}
It seems I cannot update the formAlert.alertMessage to "test" and pass the new data "test" to the child.
Any help would greatly be appreciated. Thanks

Answer 1

As you have passed data to Alert component,
<Alert data={this.state.formAlert} />
But in Alert component, you have never used that data.
I think instead of this,
{this.state.formError.message}
you should use this,
{this.props.data.alertMessage}
Update
In order to set props to state do this,
formError: {
icon: '',
header: '',
message: props.data.alertMessage,
errorType: 'errormsg'
}
Now you can use,
{this.state.formError.message}
When data changes after first render your Alert component's state will not get new data, for this you need componentDidUpdate method,
componentDidUpdate(prevProps, prevState) {
if (prevProps.data.alertMessage !== this.props.data.alertMessage) {
let formError = {...this.state.formError};
formError.message = this.props.data.alertMessage
this.setState({formError},()=>console.log(this.state.formError.message))
}
}

Answer 2

Your Child Component should use the data props to show the alert.
class Alert extends Component {
constructor(props) {
super(props);
console.log(props);
// Holds the form state and input boxes
this.state = {
formError: {
icon: '',
header: '',
message: '',
errorType: 'errormsg'
}
};
}
render() {
return (
<div className={'style-msg ' + this.state.formError.errorType}>
<div className="sb-msg"><i className="icon-thumbs-up"></i>
<strong>Well done!</strong>
{this.props.data.alertMessage}
</div>
<button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
);
}
}