Conditional Rendering In React JS

In this blog, we will learn how to render pages conditionally

We will use simple javascript conditional operator to achieve this

First, make a new app using the following command

npx create-react-app

We will make a normal component for the demo

In that component we will have two different buttons with different click events one to log in user and second to log out user

const [loggedIn, setLoggedIn] = useState(false)
 return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         {`User is ${loggedIn ? 'Logged In' : "Logged Out"}`}
         {!loggedIn ? <button onClick={() => setLoggedIn(true)}>Login</button> :
             <button onClick={() => setLoggedIn(false)}>Log Out</button>}
     </div>
 )

Here we have used useState hook to check the state of its users logged in or not
Initially, user will be logged out so we will display the login button so the user can log in and after login, we will display log out button so the user can simply log out

Demo: