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

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


You need a wrapping root tag:

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


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;}