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>
}
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} />)
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>
)
}
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>
)
}
}
Excercise
Run the above code and see what the result is.
Believe me, you will love it 💖
Top comments (0)