Estoy buscando hacer algo como esto:
Digamos que tengo dos matrices:
names: ["Prisma 2 Case", "PP-Bizon", ...] imgs: ["img1.png", "img2.png", ...]uno con nombres y otro con imagen del artículo. Lo que quiero hacer es una tabla que tenga una imagen y el nombre en una celda.
He intentado algo como esto:
<table className="table"> <tbody> <tr> {this.state.names.map((data, i) => { return <th key={i}>{data}</th>; })} </tr> <tr> {this.state.imgs.map((data, i) => { return ( <td key={i}> <img className="style" src={data} alt="" /> </td> ); })} </tr> </tbody> </table>;Pero lo que hizo son dos filas separadas. Tiene que ser por algún bucle porque el número de elementos de propiedad no siempre es el mismo.
Gracias por tus respuestas.
Creo que la forma más fácil de resolver este problema es crear una matriz y cada objeto de esta matriz tiene un objeto que consiste en un nombre y un campo de imagen. luego use el mapa y muestre esta nueva matriz.
arr = [{nombre:'',imagen:''}]
Solo necesitará un bucle para lograr lo que está buscando. Según lo que intente hacer y su estilo, es posible que deba ajustar el nombre con un lapso.
Tenga en cuenta que esto solo funcionará si sus dos matrices tienen la misma longitud y están ordenadas por igual (es decir, la primera imagen es para el primer nombre, y así sucesivamente).
<table className="table"> <tbody> <tr> {this.state.names.map((data, i) => { return ( <td key={i}> <img className="style" src={this.state.imgs[i]} alt="" /> {data} </td> ); })} </tr> </tbody> </table>Creo que esto es lo que necesita para el proyecto que está haciendo, espero que ayude, aunque es mejor convertir sus datos json en algo como esto [{name: "Prisma 2 Case" image: "img1.png"}, {name: "PP-Bizon" image: "img2.png"}, ...]
Por favor, avíseme si algo salió mal aquí.
import React from "react"; function Sample() { const data = [ { names: ["Prisma 2 Case", "PP-Bizon"], imgs: ["img1.png", "img2.png"], }, ]; return ( <> <table> <thead> <tr> <th>ID</th> <th>Color</th> </tr> </thead> <tbody> {data.map(({ names, imgs }) => { return names.map((name, index) => ( <tr key={name}> <td key={name}>{name}</td> <td key={name}>{imgs[index]}</td> </tr> )); })} </tbody> </table> </> ); } export default Sample;