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) =>

    <div className="col-lg-6">

        <h2>Using && Operator</h2>

        <div className="rows">

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

        </div>

    </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) =>

    <div className="col-lg-6">

        <h2>Using Conditional Operator</h2>

        <div className="rows">

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

        </div>

    </div>