Search code examples
reactjsstaterendering

React is not rendering as state value

I have a React component, where i want to do conditional rendering.

Code:

import React from "react";
import "./style/style.css";
class Menu  extends React.Component{
    state = {
        menuState:10
    }
    render(){
        console.log(this.state.menuState)
        if(this.state.menuState === 1 || this.state.menuState === 2)
            return <div className="menu">
                <h1>Menu </h1>
            </div>

        return <div className="menu-bar">
            <h1>Not menu</h1>
        </div>
    }
}
export default Menu;

As you can see in this code, if menuState is 1 or 2 then i want to return Menu otherwise Not menu. For convenience, i initialize menuState with 10. It returns nothing, nither menu or not menu.

When i set menuState with 1 or 2 then it returns Menu.

state = {
        menuState:1
    }
Solution

  • Your code seem to be fine. You can check css for "menu-bar"