Why h1 doesn't appear when run this code?

Question

I have the following React render function:

render() {
  return (
    <h1>Post list</h1>,
    this.state.posts_data.map(p =>
      <div key={p.id}>
        {p.title} , {p.id} , {p.userId}
      </div>
    )
  );
}

Why does the h1 not appear when run the code?

See https://blog.bitsrc.io/understanding-fragments-in-react-a1b6e534b01a — jarmod, Jan 25 '20 at 21:01
The reason why it doesn't crash but the `h1` is not rendered is because you're returning an [expression that uses the comma operator](https://stackoverflow.com/q/3561043/1218980) — Emile Bergeron, Jan 25 '20 at 21:15

score 1 · Answer 1 · answered Jan 25 '20 at 21:15

You can only return 1 element, in your case you have 2 options, you can wrap all your elements in a single <div> like this:

render() {
  return (
    <div>
      <h1>Post list</h1>,
      {this.state.posts_data.map(p =>
        <div key={p.id}>
          {p.title} , {p.id} , {p.userId}
        </div>
      }
    </div>
  );
}

or you can use <React.Fragment />.

render() {
  return (
    <React.Fragment>
      <h1>Post list</h1>,
      {this.state.posts_data.map(p =>
        <div key={p.id}>
          {p.title} , {p.id} , {p.userId}
        </div>
      }
    </React.Fragment>
  );
}

Note: In React we use JSX, so if you want to use Javascript with your HTML you have to wrap it in { }, which is why I've wrapped your this.state.posts_data.map() in those brackets.

Make sure that this.state.posts_data is an Array or else this will throw an error.

Also, the comma is no longer needed. – Emile Bergeron Jan 25 '20 at 21:18 — Emile Bergeron, Jan 25 '20 at 21:18

score 1 · Answer 2 · answered Jan 25 '20 at 21:24

1

I rewrite the code using array concept and the problem solved

 render() {
        return (
               [
                <h1>Post list</h1>,
                this.state.posts_data.map(p =>
                <div key={p.id}>
                    {p.title} , {p.id} , {p.userId}
                </div>
                )
               ]
        );

    }

answered Jan 25 '20 at 21:24

mohammed S. yaghi

13
5

That's actually what a `React.Fragment` is in the background. ;) Both can be used and that's also mean that a component can return the result from e.g. `.map` directly. – Emile Bergeron Jan 25 '20 at 21:25
Sure , but I find using [] simple and easy :) . – mohammed S. yaghi Jan 25 '20 at 21:31
@sameerRezaKhan ")" is true , it is the close tag from map function – mohammed S. yaghi Jan 25 '20 at 21:33
1

@EmileBergeron Sure , but I find using [] simple and easy :) . – mohammed S. yaghi Jan 25 '20 at 21:37
@EmileBergeron I tried the fragment way instead of [] , but I get error in p , it said not defined .. what is the problem ? – mohammed S. yaghi Jan 27 '20 at 11:11

score -1 · Answer 3 · answered Jan 25 '20 at 21:00

-1

You have to wrap both elements in one tag. Render can only return one.

answered Jan 25 '20 at 21:00

Mantas Giniūnas

545
3
9

I tried your idea , and get error in p , why ? – mohammed S. yaghi Jan 25 '20 at 21:04

Sameer Reza Khan · Answer 4 · 2020-01-27T07:08:21.877

-1

I have modified your code.

render() { 
    return ( 
        [
            <h1>Post list</h1>, 
            this.state.posts_data.map(p => (
                  <div key={p.id}> 
                      {p.title} , {p.id} , {p.userId} 
                  </div>
               ) 
            )
        ]
    );
}

When you have multi element but you don't want them to wrap in a single parent node, you need to push them to array. Also you need to use curly braces around your js code within jsx.

edited Jan 27 '20 at 07:08

answered Jan 25 '20 at 21:13

Sameer Reza Khan

423
4
12

Tell me what is wrong with answer – Sameer Reza Khan Jan 25 '20 at 21:20
This idea solve my problem .. but you have "{" cause error .. you can see my answer – mohammed S. yaghi Jan 25 '20 at 21:22
1

I wrote when to use {,}, and if it solves your problem then why a downvote? – Sameer Reza Khan Jan 25 '20 at 21:24
I downvoted since the `{}` are used incorrectly here. – Emile Bergeron Jan 25 '20 at 21:26
You could have suggested edit. But anyway, i would take it, that was my mistake. – Sameer Reza Khan Jan 25 '20 at 21:28

Why h1 doesn't appear when run this code?

4 Answers4