import Connect from './connect.svg' import Explore from './explore.svg' export const SomeComponent = props => { const someArray = [ {text: "first", image: Connect}, {text: "second", image: Explore} ] return ( <div> {someArray.map(item => ( <img src={item.image} alt="some text" /> <div> {item.text} </div> ))} </div> ) } He usado este método para establecer una propiedad de imagen en objetos para las imágenes correspondientes que importé, y luego recorrí todo para generar cosas como <li> , etc. Todo parece funcionar bien, pero quiero confirmar si esta es una mala manera de código o no.
En mi opinión es un buen componente. Sin embargo, creo que para representar los elementos <img> y <div> como hermanos, es posible que deba agruparlos como elementos secundarios de un Fragmento (por ejemplo, <> </> ). Finalmente, es una buena práctica especificar una clave. El siguiente ejemplo tiene los cambios sugeridos.
import Connect from "./connect." import Connect from './connect.svg' import Explore from './explore.svg' export const SomeComponent = props => { const someArray = [ {text: "first", image: Connect}, {text: "second", image: Explore} ] return ( <div> { someArray.map ((item, key) => ( <> <img src={item.image} alt="some text" key={key}/> <div key={key}> {item.text} </div> </> )}} </div> ) }Espero que mi opinión sea útil.