In React, you can use JavaScript conditional statements to dynamically render components or elements.
Here are several commonly used methods for handling conditional rendering in React:
### 1. Using if Statements
Use if statements in the render method or the return value of a function component to determine what to render.
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component{
render(){
const isLoggedIn =this.props.isLoggedIn;
let content;
if(isLoggedIn){
content =
Welcome back!
;
}else{
content =
Please sign up.
;
}
return(
{content}
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
### 2. Using Ternary Operators
In JSX, you can use ternary operators for concise conditional rendering.
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent =(props)=>{
const isLoggedIn = props.isLoggedIn;
return(
{isLoggedIn ?
Welcome back!
:Please sign up.
}
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
### 3. Using Logical AND (&&) Operator
In JSX, you can use the logical AND operator for conditional rendering. If the condition is true, the following element will be rendered.
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent =(props)=>{
const isLoggedIn = props.isLoggedIn;
return(
{isLoggedIn &&
Welcome back!
}
{!isLoggedIn &&Please sign up.
}
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
### 4. Using switch Statements
When you need to handle multiple conditions, you can use switch statements in the render method.
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component{
render(){
const userRole =this.props.userRole;
let content;
switch(userRole){
case'admin':
content =Welcome, Admin!
;
break;
case'user':
content =Welcome, User!
;
break;
case'guest':
content =Welcome, Guest!
;
break;
default:
content =Who are you?
;
}
return(
{content}
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
### Summary
* **`if` statements**: Suitable for use in the `render` method or function component return values to determine what to render.
* **Ternary operators**: Suitable for concise conditional rendering in JSX.
* **Logical AND (`&&`) operator**: Suitable for conditional rendering in JSX, rendering elements when the condition is `true`.
* **`switch` statements**: Suitable for handling multiple conditions and rendering different content accordingly.
YouTip