DEV Community

Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

Demystifying Conditional Rendering in ReactJS

In React, you can create distinct components that can elaborate the desired behavior. You can render only some of them, depending on the state of your application.
Conditional Rendering works exactly as it does in JavaScript. Use Conditional Operators to create elements representing the current state, and let React update the UI.

function UserGreeting(props) {
     return <h1>Welcome Back!</h1>
}

function GuestGreeting(props) {
     return <h1>Please sign up.</h1>
}
Enter fullscreen mode Exit fullscreen mode

Consider these two components

We'll create a Greeting component that will display either of these depending upon the condition.

function Greeting(props) {
     const isLoggedIn props.isLoggedIn
     if (isLoggedIn) {
          return <UserGreeting />
     } else {
          return <GuestGreeting />
     }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
// Try changing to isLoggedIn={true}
root.render(<Greeting isLoggedIn={false} />)
Enter fullscreen mode Exit fullscreen mode

When isLoggedIn={false}, the output will be Please sign up..
When isLoggedIn={true}, the output will be Welcome Back!.

You can use variables to store elements. This can help you conditionally render a part of the component without changing the rest of the output. Consider these two components representing Logout & Login buttons.

// Login Button
function LoginButton(props) {
     return (
          <button onClick={props.onClick}>
               Login
          </button>
     )
}

// Logout Button
function LogoutButton(props) {
     return (
          <button onClick={props.onClick}>
               Logout
          </button>
     )
}
Enter fullscreen mode Exit fullscreen mode

Let's create a component that holds some state, i.e. stateful component and name it LoginControl. This will render OR depending on it's current state and from the previous example.

class LoginControl extends React.Component {
     constructor(props) {
          super(props)
          this.handleLoginClick = this.handleLoginClick.bind(this)
          this.handleLogoutClick = this.handleLogoutClick.bind(this)
          this.state = {isLoggedIn: false}
     }

     handleLoginClick() {
          this.setState({isLoggedIn: true})
     }

     handleLogoutClick() {
          this.setState({isLoggedIn: true})
     }

     root.render(<LoginControl />)

     render() {
          const isLoggedIn = this.state.isLoggedIn
          let button
          if (isLoggedIn) {
               button = <LogoutButton onClick = {this.handleLogoutClick} />
          } else {
               button = <LoginButton onClick = {this.handleLoginClick} />
          }

          return (
               <div> 
                    <Greeting isLoggedIn = {isLoggedIn} />
                    {button}
               </div>
          )
     }
}
Enter fullscreen mode Exit fullscreen mode

Excercise

Run the above code and see what the result is.
Believe me, you will love it 💖

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more