条件付きレンダリングがリアクションマップループで機能しない

Question

マップされたループレンダリングを条件付きで使用しようとしていますが、エラーが発生しています。条件なステートメントせず

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; 
 
function NavbarActive(props) { 
 
\t return (
 
\t \t <li className="active"><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
function NavbarNotActive(props) { 
 
\t return (
 
\t \t <li><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
\t 
 
function NavbarList(props) \t { 
 
\t return (
 
\t \t \t <div className="navbar-wrapper"> 
 
\t <div className="container"> 
 
\t <nav className="navbar navbar-fixed-static-top navbar-inverse"> 
 
\t <div className="container"> 
 
\t <div className="navbar-header"> 
 
\t <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> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t </button> 
 
\t <a className="navbar-brand" href="#">Brand</a> 
 
\t </div> 
 
\t <div id="navbar" className="collapse navbar-collapse"> 
 
\t <ul className="nav navbar-nav"> 
 
\t {navbarValue.map((obj, index) => 
 
\t  if (obj.Status) { 
 
\t  <NavbarActive key={index} Category ={obj.Category }/> 
 
\t  } 
 
\t <NavbarNotActive key={index} Category ={obj.Category }/> 
 
\t)} 
 
\t </ul> 
 
\t </div> 
 
\t </div> 
 
\t </nav> 
 
\t </div> 
 
\t </div> 
 
\t); 
 
}; 
 

 
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>

操作コード：

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; 
 
function NavbarActive(props) { 
 
\t return (
 
\t \t <li className="active"><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
function NavbarNotActive(props) { 
 
\t return (
 
\t \t <li><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
\t 
 
function NavbarList(props) \t { 
 
\t return (
 
\t \t \t <div className="navbar-wrapper"> 
 
\t <div className="container"> 
 
\t <nav className="navbar navbar-fixed-static-top navbar-inverse"> 
 
\t <div className="container"> 
 
\t <div className="navbar-header"> 
 
\t <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> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t </button> 
 
\t <a className="navbar-brand" href="#">Brand</a> 
 
\t </div> 
 
\t <div id="navbar" className="collapse navbar-collapse"> 
 
\t \t <ul className="nav navbar-nav"> 
 
\t \t \t {navbarValue.map((obj, index) => 
 
\t \t \t \t <NavbarNotActive key={index} Category ={obj.Category }/> 
 
\t \t \t)} 
 
\t \t \t </ul> 
 
\t \t \t </div> 
 
\t </div> 
 
\t </nav> 
 
\t </div> 
 
\t </div> 
 
\t); 
 
}; 
 

 
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>

ここ

コードであります

ノードをアクティブにするかアクティブにしないかを示すために、obj.Statusを "True"または "False"として使用しています。

Answer 1

まず、{}を使用し、if-elseステートメントをマップ本体に入れ、結果を返します。

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

または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 }/> 
    ) 
})} 

三項演算子でこのコードを試してみてください

はこのようにそれを書きます。