Can someone explain to me why one function works and the other don't?

Question

So I am working on learning React, I am doing the Road To React book. In the book he used this code

const List = (props) => (
    props.list.map(item => (
      <div key={item.objectID}>
            <span>
              <a href={item.url}> {item.title} </a>
            </span>
            <span>
              {item.author}
            </span>
            <span>{item.num_comments} </span>
            <span>{item.points} </span>
          </div>
    ))
  )

And I used this code

const List = (props) => {
    return props.list.map(item => {
      <div key={item.objectID}>
            <span>
              <a href={item.url}> {item.title} </a>
            </span>
            <span>
              {item.author}
            </span>
            <span>{item.num_comments} </span>
            <span>{item.points} </span>
          </div>
    })
  }

His worked and mine did not work, I been researching and I do not understand why, if someone can please help me understand why.

Everything is correct, but you should add return after props.list.map(item => { return (
) — Sarvesh Mahajan, Apr 29 '21 at 17:59
Thank you so much, this has been bothering me, I knew I was missing something lol. — SyntaxJunkie, Apr 29 '21 at 18:06
Hi @brokecoder, please vote up, if this answer adds something useful. Thanks in advance — Sarvesh Mahajan, Apr 29 '21 at 18:14

boonya · Answer 1 · 2021-07-30T10:31:21.220

1

The issue is that you changed curly bracket ( to just brace { here ...list.map(item => { and no return statement before your jsx code.

So, you can change your code to ...list.map(item => ( or just add return statement before jsx.

...list.map(item => {
    return <div...

edited Jul 30 '21 at 10:31

answered Apr 29 '21 at 17:59

boonya

64
3

score 0 · Answer 2 · answered Apr 29 '21 at 17:55

You have to return the div in your map function.

return props.list.map(item => {
       return (<div key={item.objectID}>
            <span>
              <a href={item.url}> {item.title} </a>
            </span>
            <span>
              {item.author}
            </span>
            <span>{item.num_comments} </span>
            <span>{item.points} </span>
          </div>);
    });

score 0 · Answer 3 · answered Apr 29 '21 at 17:56

'return' is missing inside the props.list.map Since it is a function, it expects a return statement.

const List = (props) => {
    return props.list.map(item => {
      return (<div key={item.objectID}>
            <span>
              <a href={item.url}> {item.title} </a>
            </span>
            <span>
              {item.author}
            </span>
            <span>{item.num_comments} </span>
            <span>{item.points} </span>
          </div>)
    })
  }

That should solve the problem!

Can someone explain to me why one function works and the other don't?

3 Answers3