Como renderizar imagens de um array React

09/10/2021

2

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.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar