if else inside html react

Conditional rendering in React works the same way conditions work in JavaScript.

Inline If with Logical && Operator -

You may embed any expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical && operator. It can be handy for conditionally including an element.

Example,

import React from 'react'

export default (props) =>

<h2>Using && Operator</h2>

{props.userName != '' && <span> UserID: {props.userID}</span>}

</div>

Inline If-Else with Conditional Operator -

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator - condition ? true : false

Example,

import React from 'react'

export default (props) =>

<h2>Using Conditional Operator</h2>

{props.userName != '' ? <span> UserID: {props.userID}</span> : null}

</div>

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2