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.

Solution

You need a wrapping root tag:

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