How to avoid display error when filtering > 0 in the middle of the map

Question

I have a state "inventory", it stores item, price, qty, remark when display using this.state.inventory.filter(q => q.qty > 0).map everything shows fine only if there's no 0 within

Googled and stackoverflowed, can't find any way to solve this.. new to ReactJS

{this.state.inventory.filter(q => q.orderQty > 0).map((val,ind) => (
    <tr key={ind}>
        <td>{ind}.{this.state.inventory[ind].item}</td>
        <td>{(this.state.inventory[ind].price).toLocaleString()}</td>
        <td>{(this.state.inventory[ind].orderQty).toLocaleString()}</td>
       <td>{(this.state.inventory[ind].orderQty * this.state.inventory[ind].price).toLocaleString()}</td>
        <td>{this.state.inventory[ind].orderRem}</td>
        <td><button onClick={(e) => { this.handleDeleteRow(e,ind); }}>DEL</button></td>
    </tr>
))
}

My question is, when looping inside the map, inventory[ind].orderQty === 0, the rest of the map becomes incorrect. how do I skip when inventory[ind].orderQty === 0?

Answer 1

its because you are using Index. using index is always a bad option. use the object directly instead "val"

{
this.state.inventory.filter(q => q.orderQty > 0).length>0?
this.state.inventory.filter(q => q.orderQty > 0).map((val,ind) => (
    <tr key={ind}>
        <td>{ind}.{val.item}</td>
        <td>{(val.price).toLocaleString()}</td>
        <td>{(val.orderQty).toLocaleString()}</td>
       <td>{(val.orderQty * val.price).toLocaleString()}</td>
        <td>{val.orderRem}</td>
        <td><button onClick={(e) => { this.handleDeleteRow(e,ind); }}>DEL</button></td>
    </tr>
)):""
}