¡Estoy enfrentando un error extraño! Estoy tratando de renderizar dinámicamente productos en mi interfaz de usuario. Cuando tengo en mi código:
render () { const cart = this.props.cart return ( <> <PanelHeader size="sm" /> <div className="content"> <Row> <Col xs={12}> <Card> <CardHeader> <CardTitle tag="h4">Products List</CardTitle> </CardHeader> <CardBody> <table class="table table-striped table-hover"> <thead> <tr> <th scope="col"><strong>#</strong></th> <th scope="col"><strong>Name</strong></th> <th scope="col"><strong>Code Item</strong></th> <th scope="col"><strong>Quantity</strong></th> <th scope="col"><strong>Price Total</strong></th> </tr> </thead> {cart.length > 0 && <tbody> <tr> <th scope="row">1</th> <td>{cart[0].title}</td> <td>{cart[0].code}</td> <td>{cart[0].quantity}</td> <td>{cart[0].price}</td> </tr> </tbody>} </table> </CardBody> </Card> </Col> </Row> </div> </> ) } }Representa el primer elemento, sin embargo, si trato de elegir el tercer elemento: es decir, {cart[2].title} y así sucesivamente, aparece el error de que el "título" no está definido. ¡Además, si trato de dar [i] me da un error de que "i" no está definido! ¿Alguna idea de cómo resolverlo? ¡Gracias de antemano!
Si necesita representar todos sus artículos en la matriz del carrito, vaya con:
{cart.map(c => <tbody> <tr> <th scope="row">1</th> <td>{c.title}</td> <td>{c.code}</td> <td>{c.quantity}</td> <td>{c.price}</td> </tr> </tbody>}tbody sale del ciclo, luego debe agregar una clave para cada elemento.
<tbody> {cart.length > 0 && cart.map((item, index) => ( <tr key={item.id}> <th scope="row">{index}</th> <td>{item.title}</td> <td>{item.code}</td> <td>{item.quantity}</td> <td>{item.price}</td> tr>))} </tbody>