React: Syntax error: Adjacent JSX elements must be wrapped in an
enclosing tag. Did you want a JSX fragment <>...</>?
Error message
|
Failed to compile
./src/components/Article.js
Syntax error: Adjacent
JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment
<>...</>? (98:29)
96 | //--<
IsLoaded >--
97 |
<p>{this.state.idarticle}</p>
> 98 | <p>{this.state.Title}</p>
| ^
99 |
100 |
101 | //--</
IsLoaded >--
|
Solution:
In the render() function von React you have to place a performing
<div> .. </div> HTML element around the individual output elements
Wrong React Code:
|
render() {
//--------<
render(HTML) >--------
return (
//----< return >----
<div className="submit-form">
{
this.state.loading ?
(
//--< IsLoading >--
<p>loading..</p>
//--</ IsLoading >--
)
:
(
//--< IsLoaded >--
<p>{this.state.idarticle}</p>
<p>{this.state.Title}</p>
//--</ IsLoaded >--
)
}
</div>
//----</ return >----
);
//--------</
render(HTML) >--------
}
|
Solution:
You need to create a comprehensive parent element like <div> around the inner React Node
|
render() {
//--------<
render(HTML) >--------
return (
//----< return >----
<div className="submit-form">
{
this.state.loading ?
(
//--< IsLoading >--
<p>loading..</p>
//--</ IsLoading >--
)
:
(
//--< IsLoaded >--
<div>
<p>{this.state.idarticle}</p>
<p>{this.state.title}</p>
</div>
//--</ IsLoaded >--
)
}
</div>
//----</
return >----
);
//--------</
render(HTML) >--------
|