Como renderizar imagens de um array React

React

09/10/2021

Criei um array para renderizar varias vezes um componente chamado Casas, até ai tudo bem, só que cada componente desse deve ter uma foto diferente, então criei outro array com as imagens e pedi para renderiza-las de acordo com o index do array do componente Casas, porem as imagens não são renderizadas. Segue abaixo o código:

   function App() {

   const imagens = [
    { primeiraFoto }, { segundaFoto }, { terceiraFoto }, { quartaFoto }, { quintaFoto }
 ]

return (
    <div>
        {Array.from({ length: imagens.length }).map((_, index) => (
            <Casas key= foto={imagens[index]} />
        ))}
    </div>


);
}

 export default App



   import React from 'react'


function Casas(props) {

return (
    <div className = 'casa'>
        <a href="">
            <div className = 'imagem'>
                <img src={props.foto} />
            </div>
        </a>
    </div>
)

}

export default Casas


Foto do que acontece:https://imgur.com/gallery/DOCldPD

Se alguém conseguir ajudar, agradeço.
Daniel Rodrigues

Daniel Rodrigues

Curtidas 0
POSTAR