ReactJs : DropDown Event Value gets set to empty string despite the event having been triggered correctly

Question

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

Answer 1

Probably this happened because you are using event value in setState, which is an async action. JavaScript by default nullifies the event and all of its properties, when the function execution finishes. Try saving the value you need in a variable and then pass it to setState function instead of trying to access the event (since it will already be nullified by JavaScript).