ReactJs Tutorials
React Conditional Rendering
we can render multiple components depending on some conditions or state of our application. In other words, based on one or several conditions, a component decides which elements it will return.
There are several ways to do this.
File name : index.php
if
ternary operator
logical && operator
switch case operator
Conditional Rendering with enums
if Statement
IF the condition is true, it will return the element to be rendered
File name : index.php
import React from 'react';
import ReactDOM from 'react-dom';
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>GOAL!</h1>;
}
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Example
File name : index.php
import React from 'react';
import ReactDOM from 'react-dom';
function UserLoggin(props) {
return <h1>Welcome back!</h1>;
}
function GuestLoggin(props) {
return <h1>Please sign up.</h1>;
}
function SignUp(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserLogin />;
}
return <GuestLogin />;
}
ReactDOM.render(
<SignUp isLoggedIn={false} />,
document.getElementById('root')
);
Logical && Operator
This operator is used for checking the condition. If the condition is true, it will return the element right after &&, and if it is false, React will ignore and skip it.
File name :
import React from 'react';
import ReactDOM from 'react-dom';
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
File name :
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example()
{
return(<div>
{
(10 > 5) && alert('This alert will be shown!')
}
</div>
);
}
Ternary Operator
The ternary operator is used in cases where two blocks alternate given a certain condition. This operator makes your if-else statement more concise. It takes three operands and used as a shortcut for the if statement.
File name :
condition ? true : false
If the condition is true, statement1 will be rendered. Otherwise, false will be rendered.
File name :
import React from 'react';
import ReactDOM from 'react-dom';
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>GOAL!</h1>;
}
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
File name :
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
Welcome {isLoggedIn ? 'Back' : 'Please login first'}.
</div>
);
}
Switch case operator
File name :
function NotificationMsg({ text}) {
switch(text) {
case 'Hi All':
return <Message: text={text} />;
case 'Hello ItTutorial':
return <Message text={text} />;
default:
return null;
}
}
Conditional Rendering with enums
An enum is a great way to have a multiple conditional rendering. It is more readable as compared to switch case operator. It is perfect for mapping between different state. It is also perfect for mapping in more than one condition. It can be understood in the below example.
File name :
function NotificationMsg({ text, state }) {
return (
<div>
{{
info: <Message text={text} />,
warning: <Message text={text} />,
}[state]}
</div>
);
}
Example
File name :
import React, { Component } from 'react';
// Message Component
function Message(props)
{
if (props.isLoggedIn)
return <h1>Welcome Back!!!</h1>;
else
return <h1>Please Login First!!!</h1>;
}
// Login Component
function Login(props)
{
return(
<button onClick = {props.clickInfo}> Login </button>
);
}
// Logout Component
function Logout(props)
{
return(
<button onClick = {props.clickInfo}> Logout </button>
);
}
class App extends Component{
constructor(props)
{
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.state = {isLoggedIn : false};
}
handleLogin()
{
this.setState({isLoggedIn : true});
}
handleLogout()
{
this.setState({isLoggedIn : false});
}
render(){
return(
<div>
<h1> Conditional Rendering Example </h1>
<Message isLoggedIn = {this.state.isLoggedIn}/>
{
(this.state.isLoggedIn)?(
<Logout clickInfo = {this.handleLogout} />
) : (
<Login clickInfo = {this.handleLogin} />
)
}
</div>
);
}
}
export default App;