Refactor React Components to be Stateless Functional Components

I appreciate the use of spreading the object properties as props into TodoItem. Of each primitive property, the child would receive a copy of the value. When I would pass stuff to a child in other frameworks, I'd always send the object. Then when the parent asynchronously maybe gets more properties or updates existing properties, the child would have access to those too. To accomplish the same here, instinctively I would have done this

{props.todos.map(todo => <TodoItem key={todo.id} todo={todo} /> )}

And in TodoItem use props.todo.etc instead of props.etc.

Would you like to share your thoughts about this approach?

Christiaan,

I think either way of passing props down is fine. I like the object spread when the props are small in number, or very specific to the component, so in something like TodoItem having todo object values available directly on props makes sense. For something that gets a larger number of props, or maybe receives multiple objects, then the approach where an object is passed in as a single property makes sense.

In terms of having a reference to an object so that updates are propagated down doesn't really apply here. If it's a state value passed down as a prop, updating that state through setState will automatically pass the new value down as a prop when render runs again. You don't need to worry in these cases about having an object reference.

Hope this helps.