menu toggle in react JS

Question

I am implementing a menu toggling in react js . the problem is when i click on one li item .the last li item is always opening no matter what. i only want that particular menu to be shown. other menus should be hidden. i can't find the problem.

code pen link : https://codepen.io/nahidmbstu/pen/QQNdjN

code is here

var el = document.querySelector("#app")

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { display : false,  
                  display1 : false , 
                  display2 : false, 
                  display3 : false,  };
  }

  handleChange(e) {
    var ID = e.target.id

    console.log(ID )
    if (ID == 1 )
    {
      this.setState({ display: ! this.state.display } );
    }
    else if (ID == 2)
    {
      this.setState({ display1: ! this.state.display1 } );

    }
      else if (ID == 3)
    {
      this.setState({ display2: ! this.state.display2 } );

    }
      else (ID == 4)
    {
       this.setState({ display3: ! this.state.display3 } );

    }

  }


  render() {
    return (
      <div className="container">
        <div className= "row">
          <div className= "col-md-12 offset-3">
            Header
          </div>
        </div>
        <div className= "row">

          <div className= "col-md-4 offset-3">

                   <ul class = "menu-list">
                     <li class = "primary-menu" id = "1" onClick = { this.handleChange }>fastfood &#8595;
                        <ul class = "submenu-list">
                             <li class = "submenu" style={ { display: this.state.display ? 'block' : 'none' }}>Berger</li>
                             <li class = "submenu" style={ { display: this.state.display ? 'block' : 'none' }}>Pizza</li>
                        </ul>
                    </li>

                    <li class = "primary-menu">Coffee</li>

                    <li class = "primary-menu"  id = "2" onClick = { this.handleChange }>Tea &#8595;
                       <ul class = "submenu-list" >
                          <li class = "submenu" style={ { display: this.state.display1 ? 'block' : 'none' }}>Black tea</li>
                           <li class = "submenu" style={ { display: this.state.display1 ? 'block' : 'none' }}>Green tea</li>
                      </ul>
                    </li>

                    <li class = "primary-menu"  id = "3" onClick = { this.handleChange }>Milk &#8595;
                        <ul class = "submenu-list">
                           <li class = "submenu" style={ { display: this.state.display2 ? 'block' : 'none' }}>cow milk</li>
                             <li class = "submenu" style={ { display: this.state.display2 ? 'block' : 'none' }}>goat milk</li>
                        </ul>
                     </li>
                      <li class = "primary-menu"  id = "4" onClick = { this.handleChange }>Cold Drinks  &#8595;
                        <ul class = "submenu-list">
                           <li class = "submenu" style={ { display: this.state.display3 ? 'block' : 'none' }}>Coke</li>
                           <li class = "submenu" style={ { display: this.state.display3 ? 'block' : 'none' }}>Sprite</li>
                        </ul>
                     </li>
                  </ul>

          </div>
           <div className= "col-md-8 offset-3">

          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Editor />, el);

wilovent · Accepted Answer · 2018-02-05 15:59:55Z

1

You forgot a if :

 else (ID == 4){
 =>
 else if (ID == 4){

answered Feb 5, 2018 at 15:59

wilovent

1,3741 gold badge12 silver badges15 bronze badges

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

2 Comments

wilovent Over a year ago

You cannot have a predicate with an else statement. An else statement will be called if none of the if above has been triggered. In your code, the last block is not in the if statement and is call every time

wilovent Over a year ago

If this solvers your problem, can you please accept the answer (white check mark below the up/down-vote buttons) to indicate this question is answered. Thanks.

messerbill · Accepted Answer · 2018-02-05 16:00:23Z

1

your last if clause is not working as you want it to.

https://codepen.io/anon/pen/gvMwXL

updated your codepen

//....
else if (ID == 4) //add "if" here
{
   this.setState({ display3: ! this.state.display3 } );

}
//....

answered Feb 5, 2018 at 16:00

messerbill

5,6391 gold badge31 silver badges39 bronze badges

1 Comment

messerbill Over a year ago

it does but the (ID == 4) does not due to it will be evaluated as a usual expression but not as an if check - so it will always be executed if the if checks above failed

Collectives™ on Stack Overflow

menu toggle in react JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related