Adjacent JSX React syntax error

Asked

Viewed 60 times

1

I created a component that there are six images but when compiling my code returns me the following error.

inserir a descrição da imagem aqui

And this is my source code for the Imovelphotos component

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;
javascript react jsx
  • 1

    I don’t know what version of React you’re using, but you usually only need one parent. That is, put these Ivs within a single to return to the function only one element.

  • Solved, thank you very much!

1 answer

1


You have to return only 1 element in JSX. Vue.js also applies the same principle.

React 16 changes a little, but you still have to encapsulate everything with <> or <React.fragment>, therefore a <div> works equally well.

Use like this:

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;

Browser other questions tagged javascript react jsx

You are not signed in. Login or sign up in order to post.