javascript - What's wrong with passing a react functional component to .map()?

Question

Say that I have a component, Todo. It takes props title and dueDate. In a container component, I might map over some todos like this:

todos = [
  { title: "Read a book", dueDate: new Date() }
  // etc...
]

// ... later in the code ...

todos.map(x => <Todo title={x.title} dueDate={x.dueDate} />)

But, surely I could also just do this:

todos.map(Todo)

for the same result?

I haven't seen this in any tutorials or anything so I'm wondering what's wrong with this approach instead of the verbose alternative.

question from:https://stackoverflow.com/questions/65884157/whats-wrong-with-passing-a-react-functional-component-to-map

Answer 1

But, surely I could also just do this:

todos.map(Todo)

No, those are two different things. .map(x => <Todo title={x.title} dueDate={x.dueDate}/>) calls React.createElement to create the Todo, but just .map(Todo) simply calls Todo directly.

You need to create the element, not just call the function. Those are fundamentally different things. <Todo ... /> doesn't call Todo at all, it just calls React.createElement, which will remember the Todo function and call it as/when necessary. This doesn't call Todo, for instance:

// Doesn't call `Todo`, just remembers it
const el = <Todo title={x.title} dueDate={x.dueDate}/>;

Later, if we use el in another component or with ReactDOM.render or similar, then Todo will be called as necessary.

...instead of the verbose alternative.

If you're looking for something more concise, as jonrsharpe pointed out, you can do .map(x => <Todo {...x}/>)