Adjacent JSX elements must be wrapped in an enclosing tag with line break tag

Question

Imagine:

return (<a href="{this.props.url}">{this.props.name}</a><br>)

also attempted with

return (<a href="{this.props.url}">{this.props.name}</a><br />)

While the script does run without issue, the JSX compiler is upset by the <br> tag, since its a lone wolf in the logic and has no open/close tag it just is.

if on the other hand I remove the <br>

return (<a href="{this.props.url}">{this.props.name}</a>)

there is no error thrown, pretty self explanatory as far as what the issue is. The question however is how to resolve the underlying problem. how can I have that tag (or its equivalent if need be). Be added after every one of the above rendering statements.

Things to assume, this is a loop of urls/names that generate an html list of links on the page. Everything minus this factor thus far works.

The underlying issue overall is a issue of aesthetics. I am using bootstrap, and in that things are fairly uniform and I have no desire to create one-off classes or inline styles to accommodate the line-break. This is just purely for the sake of maintainability down the road.

Answer 1

You need a wrapping root tag:

<div>
    <a href={this.props.url}>{this.props.name}</a>
    </br>
</div>

Answer 2

You can render many 'tags' with a Component, but it MUST be within a 'parent tag', just like Eelke said.

Another way to do so is to declare a variable within render() function and return it:

render(){
    var step;
    if(this.props.gender==="male"){
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh um homem! </p>
            <b>aqui</b>
          </div>
        );
    }else{
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh uma mulher! </p>
            <b>aqui</b>
          </div>
        );
    }
    return step;
}