i have working code and little problem with if statement in map function here is code
const SortableItem = SortableElement(CashItem);
const SortableList = SortableContainer(({items}) => {
return (
<div>
{items.map((cashitem, index) => (
<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) => this.nameChangedHandler(event, cashitem.id)}
isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)}
delete={(event) => this.removeItem(event, cashitem.id)}
addNext={(event) => this.addNext(event, cashitem)}
realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}
optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}
dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}
/>
))}
</div>
);
});
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
const SortableItem = SortableElement(CashItem);
const SortableList = SortableContainer(({items}) => {
return (
<div>
{items.map((cashitem, index) => (
if(cashitem.isVisible===true){
<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) => this.nameChangedHandler(event, cashitem.id)}
isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)}
delete={(event) => this.removeItem(event, cashitem.id)}
addNext={(event) => this.addNext(event, cashitem)}
realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}
optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}
dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}
/>
}
))}
</div>
);
});
You aren't returning the component inside your if statement.
{items.map((cashitem, index) => {
if(cashitem.isVisible){
return <SortableItem key={`item-${index}`} ...otherProps/>
}
})}
However since you are filtering your list, why not use the Array.filter method?
{items.filter(cashItem => cashItem.isVisible).map((cashitem, index) => (
<SortableItem key={`item-${index}`} ...otherProps/>
)}
{
items.map((cashitem, index) => { //<== change it to curly braces
return cashitem.isVisible && (<SortableItem key={`item-${index}`} //<== using the return keyword
...
/>)
}
}
Instead of using parenthesis, change it to curly braces and using a return
keyword withint the if else condition as above
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With