1

Criei um componente que há seis imagens porém ao compilar o meu código me retorna o seguinte erro.

inserir a descrição da imagem aqui

E este é meu código fonte do componente ImovelPhotos

import React from 'react';

function ImovelPhotos (){
return (
    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem1-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo" src={require("assets/img/imb/_imagem2-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem3-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem4-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem5-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo" src={require("assets/img/imb/_imagem6-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem7-min.jpg")} />
                </a>
            </div>
        </div>
    </div>

    <div class="col s12 m3 l3">
        <div class="card hoverable">
            <div class="card-image">
                <a href="#">
                    <img class="responsive-photo " src={require("assets/img/imb/_imagem8-min.jpg")} />
                </a>
            </div>
        </div>
    </div>
)
}

export default ImovelPhotos;
2
  • 1
    Não sei qual a versão do React que estás a usar mas normalmente precisas de ter somente 1 elemento pai. Ou seja, põe essas divs dento de uma única para retornares à função somente um elemento.
    – Sergio
    Commented 17/05/2018 às 19:08
  • Resolvido, muito obrigado! Commented 17/05/2018 às 19:11

1 Resposta 1

1

Tens de retornar somente 1 elemento no JSX. No Vue.js aplica-se também o mesmo principio.

No React 16 muda um pouco, mas tens na mesma de encapsular tudo com <> ou <React.fragment>, por isso uma <div> funciona igualmente bem.

Usa assim:

import React from 'react';

function ImovelPhotos (){
  return (
      <div>
        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem1-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo" src={require("assets/img/imb/_imagem2-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem3-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem4-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem5-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo" src={require("assets/img/imb/_imagem6-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem7-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>

        <div class="col s12 m3 l3">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="#">
                        <img class="responsive-photo " src={require("assets/img/imb/_imagem8-min.jpg")} />
                    </a>
                </div>
            </div>
        </div>
      </div>
  )
}

export default ImovelPhotos;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .