I have created an educational app to list products for an online store. I have created a table for these products, but I would like to hide those whose quantity have run out (i.e., hide the whole row when quantity=0).

I create the table from arrays in the state using array.map:

<table className="center-table" style={{border:'solid',}}>
      <thead className="has-text-black-bis" style={{backgroundColor:"#e6be8a"}}>
        <tr>
          <th >Product Name:</th>
          <th >Unit Price:</th>
          <th >Quantity Available:</th>
          <th >Buy!</th>
        </tr>
      </thead>
      <tbody className="has-text-black-bis">
        {this.state.indices.map((a) => (
          <tr className="rows">
            <td ><strong>{this.state.itemNames[a]}</strong></td>
            <td ><strong>{this.state.costs[a]} Wei</strong></td>
            <td ><strong>{this.state.quantities[a]}</strong></td>
            <td >
              Qty: <input type="text" className='table-input' name="inputs" value={this.state.inputs[a]} onChange={this.handleInputChange} />
              <button type="button" className='buy-btn' onClick={()=>this.buyItem(a)}> Buy!</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table> 

I would imagine a for loop would work well, but I have not been able to implement this within JSX.