Why does function-returned data not render in react?

Question

Admittedly learning react & jsx, but can't for the life of me figure out why this does not render:

function generateItem(item){
  return `<li><a href=${item.url}>${item.text}</a></li>`;
}

function MyList ({items}){
  return (
      <div className="list">
        <ul>
          {items.forEach(item => {
            generateItem(item);
          })}
        </ul>
      </div>
  );
};

All it outputs (when included in my app) is an empty list:

<div class="list"><ul></ul></div>

I'm sure it's something basic and fundamental. But there I am.

https://codesandbox.io/s/relaxed-stallman-81ety

1. Use map instead of forEach. 2. I would recommend to return jsx instead of a string and use the generateItem function as a functional component instead of a function that returns something. — Christian C. Salvadó
– Christian C. Salvadó, Commented May 22, 2019 at 23:14

Tiago Coelho · Accepted Answer · 2019-05-22 23:15:49Z

4

items.forEach does not return anything... the things inside curly brackets in jsx will end up transpiled to an argument in a call to React.createElement, so they need to be an expression and return a value. (check here the transpiled version)

Try items.map(item => generateItem(item)) or simply items.map(generateItem) instead.

here's your code edited (I also changed generateItem to return jsx instead of a string)

https://codesandbox.io/s/frosty-sutherland-fp7kh

edited May 22, 2019 at 23:15

answered May 22, 2019 at 23:10

Tiago Coelho

5,10313 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trees4theForest Over a year ago

Hmm... so the whole "use can use regular javascript inside curly brackets" thing comes with some caveats. This helps.

pawel Over a year ago

@Trees4theForest your code works perfectly fine within curly brackets, it just doesn't return anything to render.

pawel Over a year ago

Here's an example that makes .forEach work by returning something from the expression. I would reject this in a code review, because .map is the most idiomatic way to do this, so just to illustrate the point: codesandbox.io/s/quizzical-haze-4mr8q

Collectives™ on Stack Overflow

Why does function-returned data not render in react?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related