if else inside html react

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>
ANIL SINGH

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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^