0

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:
enter image description here 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:
enter image description here
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

1 Answer 1

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).

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.