Write if else in react (Conditional Rendering)

I was trying to search like this “How to write if else in react”.
Then got to know about conditional rendering.
When to use conditional rendering?
If one wants to render a component based on some state change or when some condition becomes true.

In th…


This content originally appeared on DEV Community and was authored by Aastha Pandey

I was trying to search like this "How to write if else in react".
Then got to know about conditional rendering.
When to use conditional rendering?
If one wants to render a component based on some state change or when some condition becomes true.

In the below code conditional rendering has been done, it's first checking if isLoggedIn is true then it'll render the About component else if it's false Home component will be rendered.


//MyComponent.js
import React, {useState} from "react"
import Home from "./Home"
import About from "./About"
const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState();
 return <>
{
 isLoggedIn ? (<About/>) : (<Home/>)
}
</>
}
export default MyComponent;

or


//MyComponent.js

import React, {useState} from "react"
import About from "./About"
import Home from "./Home"
const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState();
 if(isLoggedIn) {
    return <About/>
  }else {
    return <Home/>
  }
}
export default MyComponent;

The code above will always render the Home component since I'm not changing the state isLoggedIn from false to true.


This content originally appeared on DEV Community and was authored by Aastha Pandey


Print Share Comment Cite Upload Translate Updates
APA

Aastha Pandey | Sciencx (2021-05-29T09:18:03+00:00) Write if else in react (Conditional Rendering). Retrieved from https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/

MLA
" » Write if else in react (Conditional Rendering)." Aastha Pandey | Sciencx - Saturday May 29, 2021, https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/
HARVARD
Aastha Pandey | Sciencx Saturday May 29, 2021 » Write if else in react (Conditional Rendering)., viewed ,<https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/>
VANCOUVER
Aastha Pandey | Sciencx - » Write if else in react (Conditional Rendering). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/
CHICAGO
" » Write if else in react (Conditional Rendering)." Aastha Pandey | Sciencx - Accessed . https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/
IEEE
" » Write if else in react (Conditional Rendering)." Aastha Pandey | Sciencx [Online]. Available: https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/. [Accessed: ]
rf:citation
» Write if else in react (Conditional Rendering) | Aastha Pandey | Sciencx | https://www.scien.cx/2021/05/29/write-if-else-in-react-conditional-rendering/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.