Conditional Rendering not working in React mapped loop

Question

I am trying to use conditional with mapped loop rendering in react but i am receiving errors.

Here is the code:

 const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; function NavbarActive(props) { return ( <li className="active"><a href="">{props.Category}</a></li> ); }; function NavbarNotActive(props) { return ( <li><a href="">{props.Category}</a></li> ); }; function NavbarList(props) { return ( <div className="navbar-wrapper"> <div className="container"> <nav className="navbar navbar-fixed-static-top navbar-inverse"> <div className="container"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span className="sr-only">Toggle navigation</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <a className="navbar-brand" href="#">Brand</a> </div> <div id="navbar" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> {navbarValue.map((obj, index) => if (obj.Status) { <NavbarActive key={index} Category ={obj.Category }/> } <NavbarNotActive key={index} Category ={obj.Category }/> )} </ul> </div> </div> </nav> </div> </div> ); }; ReactDOM.render( <NavbarList />, document.getElementById('root') ); 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="root"></div> 

Working code without conditional statment:

 const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; function NavbarActive(props) { return ( <li className="active"><a href="">{props.Category}</a></li> ); }; function NavbarNotActive(props) { return ( <li><a href="">{props.Category}</a></li> ); }; function NavbarList(props) { return ( <div className="navbar-wrapper"> <div className="container"> <nav className="navbar navbar-fixed-static-top navbar-inverse"> <div className="container"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span className="sr-only">Toggle navigation</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <a className="navbar-brand" href="#">Brand</a> </div> <div id="navbar" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> {navbarValue.map((obj, index) => <NavbarNotActive key={index} Category ={obj.Category }/> )} </ul> </div> </div> </nav> </div> </div> ); }; ReactDOM.render( <NavbarList />, document.getElementById('root') ); 

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

I am using obj.Status as "True" or "False" to indicate if node has to be rendered active or not active.

Answer 1

First you need to use {} then put if-else statement within map body, and return the result.

Write it like this:

{navbarValue.map((obj, index) => {
     if (obj.Status) 
         return <NavbarActive  key={index} Category ={obj.Category }/>
     return <NavbarNotActive  key={index} Category ={obj.Category }/>
})}

Or use ternary operator :

{navbarValue.map((obj, index) => obj.Status ?
        <NavbarActive  key={index} Category ={obj.Category }/>
     :
        <NavbarNotActive  key={index} Category ={obj.Category }/>}
)}

Answer 2

{navbarValue.map((obj, index) => {
    return (
        (obj.Status) ?
            <NavbarActive  key={index} Category ={obj.Category }/> :
            <NavbarNotActive  key={index} Category ={obj.Category }/>
    )
})}

Try this code with ternary operators.