Reputation: 3
render() {
return (
<p>Hello, world!</p>
<p>Hello, React!</p>
);
}
If
tag is only one, it works, but in this case, it doesn't work. What's the problem? Thank you for your considering!
Upvotes: 0
Views: 48
Reputation: 575
I would advice against wrapping it with div because of their abstraction in DOM Tree. You need to wrap you components into a fragment to ensure single parent rule:
e.g.
render() {
return (
<React.Fragment>
<p>Hello, world!</p>
<p>Hello, React!</p>
</React.Fragment>
);
}
You can also you <> instead of Fragments i.e.
render() {
return (
<>
<p>Hello, world!</p>
<p>Hello, React!</p>
</>
);
}
Upvotes: 2