Syntax error Adjacent JSX React

Question

Syntax error Adjacent JSX React

Navigation

#1 by (1 votes)

1

I created a component that has six images but when compiling my code I get the following error.

AndthisismysourcecodefortheImovelPhotoscomponent

importReactfrom'react';functionImovelPhotos(){return(<divclass="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

asked by anonymous 17.05.2018 / 20:54

1 answer

Select only ONE checkbox with vanilla javascript and bootstrap 4 Little doubt about Buttons

score 1 · Accepted Answer

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

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

Use this way:

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;