victor
victor

Reputation: 3

I am new to the React and I don't know why this doesn't work

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

Answers (2)

Jawad ul hassan
Jawad ul hassan

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

Brian Wang
Brian Wang

Reputation: 83

You can cover two lines using Div tag.

Upvotes: 2

Related Questions