React JSのループを使用して、条件に基づいて表データをレンダリングするかどうかをレンダリングしますか？

Question

私はReact.jsを使って練習をしていますが、データ配列の繰り返しや、各データノードのプロパティに基づいた要素の選択的なレンダリングに問題があります。

データセットは次のようにフォーマットされています

var requests = [ 
    {"id":1, "title":"request","updated":"2015-08-15","created":"2015-08-12","status":"Denied"}, ...] 

私のレンダリングコードは、それがまたはレンダリングしてはならないべきかを決定するためにフラグ値を探しています。ロジックはうまく動作しています（つまりconsole.logというときはtrueまたはfalseを返します）。ただし、JSXで記述されたレンダリングコードが問題になります。これは私がこれまでのtbodyセクションで持っているものです。

  <tbody>  
      {requests.map(function(row, i) { 
       {filter === requests[i].status || filter === "" ? 
       <tr key={i}> 
        <td style={tdStyle}>{row.title}</td> 
        <td style={tdStyle}>{row.status}</td> 
        <td style={tdStyle}>{row.created_at}</td> 
        <td style={tdStyle}>{row.updated_at}</td> 
        <td style={tdStyle}><a href="">delete</a></td> 
       </tr> 
       : null} 
      })} 
      </tbody> 

私は指導のためのthis link見てきましたが、それは動作していないようです。

ご協力いただければ幸いです！

Answer 1

const requests = [ 
    {"id":1, "title":"Request from Nancy","updated_at":"2015-08-15 12:27:01 -0600","created_at":"2015-08-12 08:27:01 -0600","status":"Denied"}, 
    {"id":2, "title":"Request from David","updated_at":"2015-07-22 11:27:01 -0600","created_at":"2015-07-15 12:27:01 -0600","status":"Approved"} 
]; 

const jsx = function(filter) { 

    const isCorrectStatus = (x) => x.status === filter; 

    return <tbody>  
     {requests.filter(isCorrectStatus).map(function(row, i) { 
      return <tr key={i}> 
       <td>{row.title}</td> 
       <td>{row.status}</td> 
       <td>{row.created_at}</td> 
       <td>{row.updated_at}</td> 
       <td><a href="">delete</a></td> 
      </tr> 
     })} 
    </tbody> 
} 

const filter = 'Denied'; 
ReactDOM.render(jsx(filter), document.getElementById('app')); 

は、我々が構築済みのフィルタ方法を持って、我々としても、車輪を再実装するのではなく、それを使用することができ、それが我々のコード少しクリーナーを保持します。

Answer 2

私のコメントで述べたように、計算された値を返す必要があります。これにより、map()関数が正しく機能することができます。

また、この状況では、filter()関数を使用して、条件を満たす要素をマップするだけです。次のように私はそれを書き換えたい

<tbody> 
    // use the filter function to get only the matching elements before mapping 
    {requests.filter(function(row){ 
    // return true to include array element, false to exclude 
    return (filter === row.status || filter === ""); 
    }).map(function(row, i) { 
     // always wrap jsx in parentheses because of line breaks in javascript syntax 
     // make sure to return, this actually adds it 
     return (
     <tr key={i}> 
      <td style={tdStyle}>{row.title}</td> 
      <td style={tdStyle}>{row.status}</td> 
      <td style={tdStyle}>{row.created_at}</td> 
      <td style={tdStyle}>{row.updated_at}</td> 
      <td style={tdStyle}><a href="">delete</a></td> 
     </tr> 
    ); 
    })} 
</tbody>