React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
When UI is designed using React, we come across a situation when components are to be rendered on the screen based upon some condition. For eg, In a University Information System, when a teacher logins, then different components are rendered whereas when student logins, different components are rendered.
This is called Conditional Rendering of React Components.
Conditional Rendering: To create multiple components and render them based on some conditions. This is also a kind of encapsulation supported by React.
How to do Conditional Rendering?
It is done using stateVariable. The value of the stateVariable determines whether to render the component or not. Its value can be changed by the occurrence of any event like onClick.
How to Prevent a component from Rendering? To prevent a component from rendering then based upon condition, return “NULL”.
Creating React Application:
Step 1: Create a react application using the following command.
npx create-react-app foldername
Step 2: Once it is done, change your directory to the newly created application using the following command.
cd foldername
Project Structure: The project should look like this:
Example 1: In this example, we will return a card displaying some information. This card is assigned to a functional component i.e <Rendering />
In app.js , we will call this component twice with some props. Based upon the value of the props, if value passed is “display” then component is returned else null is returned.
Javascript
import React from 'react'import { useState } from 'react';import Card from '@mui/material/Card';import CardContent from '@mui/material/CardContent';import CardMedia from '@mui/material/CardMedia';import Typography from '@mui/material/Typography';import { CardActionArea } from '@mui/material';import Divider from '@mui/material/Divider';import Stack from '@mui/material/Stack';function Rendering(props) { if (props.value === 'notDisplay') { return null; } if (props.value === 'display') { return ( <div> <h3>Courses available on neveropen</h3> <div style={{ display: 'inline' }}> <Card sx={{ maxWidth: 345 }} <CardActionArea> <CardMedia component="img" height="140" image= alt="green iguana" /> <CardContent> <Typography gutterBottom variant="h5" component="div"> Java </Typography> <Typography variant="body2" color="text.secondary"> The Java codes are first compiled into byte code (machine-independent code). Then the byte code runs on Java Virtual Machine (JVM) regardless of the underlying architecture. </Typography> </CardContent> </CardActionArea> </Card> </div> </div > ) }}function App() { return ( <div className="App"> <div> <h1 style={{ color: 'green' }}> neveropen </h1> <h3> Preventing Rendering of Components in React </h3> <Rendering value="display" /> <Rendering value="notDisplay" /> </div> </div> );}export default App; |
Output:
Explanation: Just notice, that <Rendering /> is called twice but only 1-time component is rendered on the screen.
Example 2: In this example, we will display the call of the component by passing Integers as props. But only even numbers will be displayed. Odd numbers will be prevented from rendering by returning null.
Javascript
import React from 'react';function Rendering(props) { if (parseInt(props.value) % 2 != 0) { return null; } if (parseInt(props.value) % 2 == 0) { return ( <div style={{ display: 'inline', padding: '2%' }}> <div style={{ background: 'green', color: 'white', display: 'inline', padding: '1%' }}> {props.value} </div> </div> ) }function App() { return ( <div className="App"> <div> <h1 style={{ color: 'green' }}>neveropen</h1> <h3>Preventing Rendering of Components in React</h3> <h1 style={{ color: 'green' }}> Only Even props will be displayed</h1> <br></br> <Rendering value="1" /> <Rendering value="2" /> <Rendering value="3" /> <Rendering value="4" /> <Rendering value="5" /> <Rendering value="6" /> <Rendering value="7" /> <Rendering value="8" /> <Rendering value="9" /> <Rendering value="10" /> </div> </div> );}export default App; |
Output:
Explanation: See component is called 10 times but components with odd props are prevented from rendering by returning null.
