OperationSavDetails.js
class OperationSavDetails extends Component {
constructor(props) {
super(props);
this.state = {
statusUpdateDropDownOpen: false,
statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV"
};
this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind(
this
);
this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind(
this
);
}
changeStatusUpdateDropDownValue(e) {
console.log("e.currentTarget.textContent");
console.log(e.currentTarget.textContent);
this.setState({
statusUpdateDropDownValue: e.currentTarget.textContent
});
}
toggleStatusUpdateDropDown() {
this.setState({
statusUpdateDropDownOpen: !this.state.statusUpdateDropDownOpen
});
}
render() {
const { isAuthenticated, user } = this.props.auth;
const DefaultDropDownValues = (
<Row className="align-items-center">
<Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<Dropdown
isOpen={this.state.statusUpdateDropDownOpen}
toggle={() => {
this.toggleStatusUpdateDropDown();
}}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusUpdateDropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
{" "}
<div
value="repare"
onClick={this.changeStatusUpdateDropDownValue}
>
Default DropDown
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</Col>
</Row>
);
const operateurSavDropDownValues = (
<Row className="align-items-center">
<Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<Dropdown
isOpen={this.state.statusUpdateDropDownOpen}
toggle={() => {
this.toggleStatusUpdateDropDown();
}}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusUpdateDropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
{" "}
<div
value="repare"
onClick={this.changeStatusUpdateDropDownValue}
>
Réparé
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</Col>
</Row>
);
return (
<div className="animated fadeIn">
{user.role === "operateur_sav"
? operateurSavDropDownValues
: DefaultDropDownValues}
</div>
);
}
}
It renders this dropDown button:
Depending on user.role, it will render different dropdown values.
When the user clicks on a dropdown value, it gets updated in the state value statusUpdateDropDownValue with this function:
changeStatusUpdateDropDownValue(e) {
console.log("e.currentTarget.textContent");
console.log(e.currentTarget.textContent);
// Logs this: Réparé
this.setState({
statusUpdateDropDownValue: e.currentTarget.textContent
});
}
The log result is correct. However*, the statusUpdateDropDownValue (which is the value that gets displayed on the dropdown button when it's not clicked) is assigned either null or an empty string:

And I get this error:
index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `currentTarget` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/docs/events.html#event-pooling for more information.
I have followed the link provided in the error and I still couldn't get why despite the fact that the selected dropdown value is logged correctly, it does not get updated in the state correctly