title: react if statement in jsx and map
body: <p>i have working code and little problem with if statement in map function here is code</p>
  
  <pre><code>    const SortableItem = SortableElement(CashItem);
  const SortableList = SortableContainer(({items}) =&gt; {
    return (
      &lt;div&gt;
        {items.map((cashitem, index) =&gt; (
          &lt;SortableItem key={`item-${index}`} 
            index={index} 
            isPayed={cashitem.isPayed}
            date={cashitem.date}
            name={cashitem.name}
            realisticVal={cashitem.realisticVal}
            realisticBalance={cashitem.realisticBalance}
            optimisticBalance={cashitem.optimisticBalance}
            optimisticVal={cashitem.optimisticVal}
            changedName={(event) =&gt; this.nameChangedHandler(event, cashitem.id)} 
            isBlocked={(event) =&gt; this.handleChangeCheckbox(event, cashitem.id)} 
            delete={(event) =&gt; this.removeItem(event, cashitem.id)} 
            addNext={(event) =&gt; this.addNext(event, cashitem)} 
            realisticChange={(event) =&gt; this.realisticBalanceChangedHandler(event, cashitem.id)}  
            optimisticChange={(event) =&gt; this.optimisticBalanceChangedHandler(event, cashitem.id)}  
            dateChangedHandler={(event) =&gt; this.dateChangedHandler(event, cashitem.id)}
           /&gt;
        ))}
      &lt;/div&gt;
    );
  });
  </code></pre>
  
  <p>now i want chceck if statement to render only  when in map cashitem has state is visible cashitems isVisible already have isVisible:true or false i want to do something like that</p>
  
  <pre><code> const SortableItem = SortableElement(CashItem);
  const SortableList = SortableContainer(({items}) =&gt; {
    return (
      &lt;div&gt;
        {items.map((cashitem, index) =&gt; (
          if(cashitem.isVisible===true){
            &lt;SortableItem key={`item-${index}`} 
            index={index} 
            isPayed={cashitem.isPayed}
            date={cashitem.date}
            name={cashitem.name}
            realisticVal={cashitem.realisticVal}
            realisticBalance={cashitem.realisticBalance}
            optimisticBalance={cashitem.optimisticBalance}
            optimisticVal={cashitem.optimisticVal}
            changedName={(event) =&gt; this.nameChangedHandler(event, cashitem.id)} 
            isBlocked={(event) =&gt; this.handleChangeCheckbox(event, cashitem.id)} 
            delete={(event) =&gt; this.removeItem(event, cashitem.id)} 
            addNext={(event) =&gt; this.addNext(event, cashitem)} 
            realisticChange={(event) =&gt; this.realisticBalanceChangedHandler(event, cashitem.id)}  
            optimisticChange={(event) =&gt; this.optimisticBalanceChangedHandler(event, cashitem.id)}  
            dateChangedHandler={(event) =&gt; this.dateChangedHandler(event, cashitem.id)}
           /&gt;
          }
  
        ))}
      &lt;/div&gt;
    );
  });
  </code></pre>