Creé una aplicación educativa para enumerar productos para una tienda en línea. He creado una tabla para estos productos, pero me gustaría ocultar aquellos cuya cantidad se ha agotado (es decir, ocultar toda la fila cuando quantity=0 ).
Creo la tabla a partir de matrices en el estado usando 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>Me imagino que un bucle for funcionaría bien, pero no he podido implementar esto dentro de JSX.
Simplemente agregue un filtro antes del método del mapa:
this.state.indices.filter((a) => a.quantity !== 0).map((a) => (...También puedes simplemente ir
this.state.indices.filter((a) => a.quantity).map((a) => (...Porque 0 se considera falso en JS.