Javascript react component conditional menu item showing

Question

I have a react component and I've added 2 links.

One link will show the login link and the other with show the logout.

I just don't want both to show so on componentDidMount I've added a condition which will hide either one or the other.

Here is the code:

class Navigation extends Component {

  componentDidMount() {

    let logged = true;

    if (logged) {
      document.getElementById('login').style.display = 'none';
    } else {
      document.getElementById('logout').style.display = 'none';
    }

    }
  }

  render() {

    return (
      <div>
        <ul>
          <li id="login"><a href="#login">Login</a></li>
          <li id="logout"><a href="#logout">Logout</a></li>
        </ul>
      </div>
    );
  }
}

export default Navigation;

The issue is not nothing is being hidden either way so it's not working.

How can I fix this so I can get the condition to hide either one or the other?

Shubham Khatri · Accepted Answer · 2017-06-28 10:32:20Z

1

I would say instead of directly modifying the DOM properties go with the React approach of conditional rendering like

class Navigation extends Component {

  render() {
    //Get the logged value from wherever you are getting it in the application.
    // Eg: let logged = true 
    return (
      <div>
        <ul>
          {logged ? (<li id="logout"><a href="#logout">Logout</a></li>) :  (<li id="login"><a href="#login">Login</a></li>) }

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

export default Navigation;

answered Jun 28, 2017 at 10:32

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Tadeáš Peták · Accepted Answer · 2017-06-28 10:37:53Z

1

You probably want to pass the logged variable to the Navigation component simply as props: <Navigation logged />. In that case, you could than write it this way:

const Navigation = ({ logged }) => {
  <div>
    <ul>
      {!logged && <li id="login"><a href="#login">Login</a></li>}
      {logged && <li id="logout"><a href="#logout">Logout</a></li>}
    </ul>
  </div>
}

export default Navigation;

answered Jun 28, 2017 at 10:37

Tadeáš Peták

5672 silver badges13 bronze badges

Comments

Mayank Shukla · Accepted Answer · 2017-06-28 10:38:04Z

Instead of setting the style display: none and manipulating the DOM directly, use conditional rendering and render only one element on the basis of condition. Use ternary operator applying conditions inside JSX.

Like this:

class Navigation extends React.Component {

    render() {
        let logged = true;     //use actual value
        return (
            <div>
                <ul>
                    {
                        logged ? 
                            <li id="logout"><a href="#logout">Logout</a></li>
                        :
                            <li id="login"><a href="#login">Login</a></li>
                    }
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<Navigation/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Collectives™ on Stack Overflow

Javascript react component conditional menu item showing

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related