即使第一个函数调用第二个函数，函数也不按正确顺序触发

Question

My aim was to use a boolean stored in state to update a dropdown menu to either show or remain hidden. I wrote two functions, 'toggleHander' (triggered by a click event) which toggles the boolean state and then calls the next function - 'dropdownClickHandler'. 'dropdownClickHandler' adds a 'show' css class (or not) dependent on the state of the boolean held in state hence updating the drop down menu.

My problem (I think) is that the second function ('dropdownClickHandler') is called before the first ('toggleHandler') - even though the 'toggleHandler' is directly triggered by a click event and should only call the second function after setState has completed. This results in a user needing to click twice before the drop down shows (instead of once).

I'm not sure if this is something to do with hoisting or the asynchronous nature of setState? Or perhaps something else?

Any help appreciated

FYI - I've tried changing the initial boolean state to true and the menu works. I just don't understand the order of function calls

Codepen here: https://codepen.io/kiron/pen/vwERzP

Suspected offending code:

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
  ); 
}


dropdownClickHandler = () => {
  console.log('in drop', this.state);
  this.state.addClass === true ? boxClass = ["dropdownContent", "dropdownContent__show"] : boxClass = ["dropdownContent"]
}   

Answer 1

proper syntax:

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => {
      console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
    }
  ); 
}

but (as stated in comments) dropdownClickHandler() won't work correctly ...

...you don't need it at all (basic conditional renderings):

render() {
  const boxClass = this.state.addClass ? "dropdownContent dropdownContent__show" : "dropdownContent"

  return (
    <div className={boxClass} >

or even simpler

render() {
  return (
    <div className={"dropdownContent "+ this.state.addClass && "dropdownContent__show"} >