React Hook: Why is my alert different from the props received? - reactjs

Question

I'm new to React hooks. I'm trying to display a props received from another component in a small alert.
import React, { Fragment } from "react";
import { useAlert } from "react-alert";
const Alert = props => {
const alert = useAlert();
console.log("<< # Alert props.message", props.message); // Diplays "deputy saved"
return (
<Fragment>
<button
className="btn btn-outline-secondary"
onClick={() => {
alert.show(props.message); // Displays the previous props received. Not the one from the console log above.
}}
>
Ajouter
</button>
</Fragment>
);
};
export default Alert;
Here is the component in which the alert is rendered. The message is setstate after being fetched by my Api file. This message contains the res.json from my Node server. For example "deputy created" or "this deputy already exists". The message is then sent to the alert component via an attribute and received as a props.
// AddParty Component
import React from "react";
import { Form, Text, TextArea } from "informed";
import styled from "styled-components";
import Alert from "../../core/admin/Alert";
import "react-datepicker/dist/react-datepicker.css";
import Api from "../../../utils/Api";
class AddParty extends React.Component {
constructor(props) {
super(props);
this.state = {
image: {},
message: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange({ name, value }) {
this.setState({
[name]: value
});
}
async onSubmit(formState) {
console.info("formState", formState);
const { image } = this.state;
const newParty = new FormData();
newParty.append("image", image, image.name);
newParty.append("data", JSON.stringify(formState));
const message = await Api.addParty(newParty);
console.log("message :", message);
this.setState({
message
});
}
render() {
const { message, isSubmitted } = this.state;
console.log("message", message);
return (
<Container className="container">
<Form onSubmit={formState => this.onSubmit(formState)}>
<Label>
Nom du parti:
<Text
field="name"
type="text"
className="form-control form-control-sm"
/>
</Label>
<Label>
Description :
<TextArea
field="description"
className="form-control form-control-sm"
/>
</Label>
<Label>
Photo:
<input
type="file"
onChange={event =>
this.handleChange({
name: "image",
value: event.target.files[0]
})
}
/>
</Label>
<Alert
type="submit"
className="btn btn-outline-secondary"
message={message}
/>
</Form>
</Container>
);
}
}
export default AddParty;
I don't understand why the alert displayed is always the one from the previous props received, not the one showing in the console.log

Answer 1

I solved my problem using another react alert module called react-toastify. https://www.npmjs.com/package/react-toastify
Thanks you to all that helped me