React Intro tutorial: how do list's keys get their value?

Question

I have no experience with js and suggested to learn React before React Native. My question comes from code from Intro to React's tutorial.

In tutorial, we made a list named history, with move as its key.

class Game extends React.Component {
  constructor() {
    super();
     this.state = {
      history: [{
        squares: Array(9).fill(null)
      }],
      xIsNext: true,
      stepNumber: 0,
    };
  }

  [...]

  render() {
    [...]

    const moves = history.map((step, move) => {
      const desc = move ?
        'Move #' + move :
        'Game start';
      return (
        <li key={move}>
          <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
        </li>
      );
    });

[...]

The explanation for that part was

[...] React asks you to specify a key property on each element in a list, a string to differentiate each component from its siblings. In this case, alexa, ben, claudia might be sensible keys; if the items correspond to objects in a database, the database ID is usually a good choice:

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

[...] It's strongly recommended that you assign proper keys whenever you build dynamic lists. If you don't have an appropriate key handy, you may want to consider restructuring your data so that you do. [...] If you don't specify any key, React will warn you and fall back to using the array index as a key – [...]

Now what I'm confused about, what is move on history above? I can't see anything implying move is assigned a value, yet when it's printed, it shows list index? How come?

I'd strongly consider learning JS before trying to learn a framework that relies heavily on knowing JS. — Dave Newton
– Dave Newton, Commented Nov 14, 2016 at 8:27

Mark Williams · Accepted Answer · 2016-11-14 08:51:27Z

6

The list is being created by using a map method to 'map over' the history array. map will call a function for each element in the array; the second parameter to this callback function is the index of the element in the array.

In your code the callback function looks like this:

(step, move) => {
  const desc = move ?
    'Move #' + move :
    'Game start';
  return (
    <li key={move}>
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
    </li>
  );
}

and therefore the index of the array, the second parameter, is called move (you could call it anything); the value of this is then rendered as they key property for each list item.

Description of map here

edited Nov 14, 2016 at 8:51

answered Nov 14, 2016 at 8:23

Mark Williams

2,3081 gold badge14 silver badges15 bronze badges

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

2 Comments

Konayuki Over a year ago

So... is step the current value? But just not used?

Konayuki Over a year ago

nvm finally I understand. Thank you very much, your explanation and link truly a big help!

Collectives™ on Stack Overflow

React Intro tutorial: how do list's keys get their value?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related