React.js array.map does not return jsx [duplicate]

Question

I have a mobx store from where I am pulling an array of data and trying to render each as an <li>

 let completedList = completedTodos.map(todo => { <li> {todo.value} </li> } );

I can't figure out why this does not return anything but undefined.

Sorry I am new here and this is probably a dumb question.

you are not returning anything inside map body use this: let completedList = completedTodos.map(todo => <li> {todo.value} </li> ); or use return to return the html element, like this: let completedList = completedTodos.map(todo => {return <li> {todo.value} </li> }); — Mayank Shukla
– Mayank Shukla, Commented May 16, 2017 at 19:45
@blackmind check my first comment again, i mentioned both ways :) — Mayank Shukla
– Mayank Shukla, Commented May 16, 2017 at 19:50
For reference this is how I got my code to work. render(){ let completedList = completedTodos.map(todo => <li> {todo.value} </li>); return ( <div> <h1>todos</h1> {completedList} </div> ) } — Lars Martinson
– Lars Martinson, Commented May 16, 2017 at 20:26

Zfalen · Accepted Answer · 2017-05-16 19:53:25Z

4

Easy mistake! Your arrow function should use parentheses () instead of brackets {} if you don't explicitly use return.

let completedList = completedTodos.map(todo => (<p>{todo.value}</p>));

Otherwise, you can skip the parens entirely - the arrow function without brackets implies a return.

let completedList = completedTodos.map(todo => <p>{todo.value}</p>);

answered May 16, 2017 at 19:46

Zfalen

9187 silver badges20 bronze badges

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

2 Comments

You can also just do completedTodos.map(todo => <p>{todo.value}</p>); but good catch on the {}

Yep, @mayank-shukla and @blackmind are right - you don't even need the parens let completedList = completedTodos.map(todo => <p>{todo.value}</p> );