Is it possible to use if…else… statement in React render function?

by

Not exactly like that, but there are workarounds. There’s a section in React’s docs about conditional rendering that you should take a look. Here’s an example of what you could do using inline if-else.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

You can also deal with it inside the render function, but before returning the jsx. 

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

It’s also worth mentioning what ZekeDroid brought up in the comments. If you’re just checking for a condition and don’t want to render a particular piece of code that doesn’t comply, you can use the && operator.

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. Error : Cannot read property ‘map’ of undefined
  4. What are React controlled components and uncontrolled components?
  5. How can I prevent event bubbling in nested React components on click?
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  8. forEach() in React JSX does not output any HTML
  9. Starter create-react-app with IE11 polyfill import still aborts in IE11
  10. how to cancel/abort ajax request in axios
  11. Simple Conditional Routing in Reactjs
  12. Redux: Why is avoiding mutations such a fundamental part of using it?
  13. React Router not working with Github Pages
  14. Default property value in React component using TypeScript
  15. Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
  16. React Router 4 Nested Routes not rendering
  17. React passing parameter via onclick event using ES6 syntax
  18. React fetch data in server before render
  19. ReactJS difference between stateful and stateless
  20. Why useEffect doesn’t run on window.location.pathname changes?
  21. Call child component method from parent in react
  22. Passing object as props to jsx
  23. create-react-app: how to use https instead of http?
  24. Webpack & Typescript image import
  25. Passing values through React-Router v4
  26. How to import a .txt file from my source?
  27. How to listen to localstorage value changes in react?
  28. Why my render method is react called twice
  29. Put A Warning If Page Refresh in ReactJS
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment