react - conditional rendering inside component return function

Question

I would like to understand why react behaves this way.

This works

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
    return (
      <>
        {posts.map(post => (
          <Post key={post.id} title={post.title} />
        ))}
      </>

But this doesn't

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
    return (
      <>
        {posts.map(post => {
          // changes are here
          if (post.id < 2) {
            <Post key={post.id} title={post.title} />;
          }
        })}
      </>

It just returns blank. No errors.

What is the reason react isn't rendering this? And what would be the best approach to only render post-1?

score 2 · Answer 1 · answered Nov 13 '18 at 03:22

2

You have to change it to return <Post ... />;

answered Nov 13 '18 at 03:22

izb

562
4
11

score 2 · Accepted Answer · answered Nov 13 '18 at 03:31

The arrow function syntax can accept either a value to return, or a block of code to execute. In the first example, you give a value: <Post key={post.id} title={post.title} />. However, in the second example you give a code block (by using {}). So, you need to either add return before <Post key={post.id} title={post.title}>like so:

{posts.map(post => {
  if (post.id < 2) {
    return <Post key={post.id} title={post.title} />;
  }
})}

or change the if into an && to keep the implicit return behavior:

{posts.map(post =>
  (post.id < 2) && <Post key={post.id} title={post.title} />
}

It makes sense now. I was always omitting the second return statement. Thanks for clarifying. — Darius Mandres, Nov 13 '18 at 03:52

score 2 · Answer 3 · edited Nov 13 '18 at 03:44

2

You didn't return anything in the map function argument. You can do that easily with a ternary expression and using es6 arrow notation:

 posts.map(post => (post.id < 2) ? <Post key={post.id} title={post.title} /> : null)

edited Nov 13 '18 at 03:44

Hemadri Dasari

32,666
37
119
162

answered Nov 13 '18 at 03:33

Riley Steele Parsons

335
1
6

1

The ternary expression you used is incorrect. Please check my edit – Hemadri Dasari Nov 13 '18 at 03:44

score 1 · Answer 4 · answered Nov 13 '18 at 03:24

The second didn't work because you forgot the return statement.

Try this:

  <>
    {posts.map(post => {
      // changes are here
      if (post.id < 2) {
        return <Post key={post.id} title={post.title} />; //added return statement
      }
    })}
  </>

react - conditional rendering inside component return function

4 Answers4

Linked