2

I am currently stuck trying to understand this bit of ReactJS code from here:

const TodoList = ({ todos, onTodoClick }) => (
    <ul>
      {todos.map(todo => (
      <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
      ))}
    </ul>
);

I believe that ({ todos, onTodoClick }) => (...) is called a destructuring bind? But from the examples I've seen of them follow this pattern: {...} => (...), as in the initial hash is not surrounded with parentheses, contrasting my example. Edit: examples of this are here and here.

What I also don't understand about it is that it seems like this is a function that updates a value and yet it is declared with const?

I looked around this site for a bit, and I found explanations of destructuring binds, but none of them seemed to give me insight into understanding this code.

Thank you very much for taking the time to read this question.

kuwze
  • 411
  • 4
  • 13
  • 1
    "I've seen of them follow this pattern: {...} => (...)" are you sure? That would be a syntax error. You can only leave off the parens when there is a single argument that is a simple variable. – loganfsmyth Sep 01 '17 at 17:06
  • *"as in the initial hash is not surrounded with parentheses"* If you have seen that somewhere, then *that* example is wrong. You can easily very this yourself by typing `var foo = ({a, b}) => {}` and `var foo = {a, b} => {}` in your browser console. Only one of them works. – Felix Kling Sep 01 '17 at 17:06
  • *"is called a destructuring bind"* More specifically, this would be called *parameter destructuring*. – Felix Kling Sep 01 '17 at 17:08

2 Answers2

4

The { todos, onTodoClick } syntax (Parameter handling as destructuring ) says that this function takes an object. If the object has a key for todos or onTodoClick they will be ready to use as variables. This is just syntactic sugar for this common pattern at the beginning of functions:

let todos = o.todos;
let onTodoClick = o.onTodoClick;

Since you are within JSX this syntax is particularly convenient as you want things to look as declarative as possible.

The const TodoList part is defining TodoList as a constant function reference which cannot be modified. In this case, the const has nothing to do with any values that this function may modify just the pointer to the function itself.

This function declaration is very similar to the potentially more familiar:

var TodoList = function(o) {
    // etc
};

But, if you used that form, then technically it would be legal to do:

TodoList = 'foobar';

...which would probably cause a bug.

The const is just enforcing that the TodoList variable stays put. This is a subtle difference that is just a general best-practice.

Jonathan.Brink
  • 23,757
  • 20
  • 73
  • 115
  • Could you tell me more about the const TodoList? Is it different from a normal function declaration? Is it easier to start with the destructuring-bind in that form? I don't understand why you would use an alternative to the normal function declaration. – kuwze Sep 01 '17 at 17:12
0

@kuwze - you could also do the above in ES6 destructuring syntax by:

let { todos, onTodoClick } = o;
faddah
  • 317
  • 1
  • 3
  • 9