React Tutorial history map (step, move)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

In the "Showing the Past Moves" section here, we have the below code:

const moves = history.map((step, move) => {

      const desc = move ?

        'Go to move #' + move :

        'Go to game start';

      return (

        <li>

          <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

      );

    });

This code seems to be first mapping a built in variable "step" to variable "move", before essentially having this Python logic:

const moves = [lambda move: const desc = move ... for move in history]

As someone who is familiar with Python but not javascript, can you explain:

1) "step" variable is not assigned anywhere, and I haven't been able to google a built in step variable, so how is "step" getting assigned to the number of game moves?

2) What is the logic behind this syntax: (step, move) meaning first map step into move, then execute a lambda function? Primarily, the first 'map step into move' part doesn't make sense to me.

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

add a comment |

In the "Showing the Past Moves" section here, we have the below code:

const moves = history.map((step, move) => {

      const desc = move ?

        'Go to move #' + move :

        'Go to game start';

      return (

        <li>

          <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

      );

    });

This code seems to be first mapping a built in variable "step" to variable "move", before essentially having this Python logic:

const moves = [lambda move: const desc = move ... for move in history]

As someone who is familiar with Python but not javascript, can you explain:

1) "step" variable is not assigned anywhere, and I haven't been able to google a built in step variable, so how is "step" getting assigned to the number of game moves?

2) What is the logic behind this syntax: (step, move) meaning first map step into move, then execute a lambda function? Primarily, the first 'map step into move' part doesn't make sense to me.

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

add a comment |

In the "Showing the Past Moves" section here, we have the below code:

const moves = history.map((step, move) => {

      const desc = move ?

        'Go to move #' + move :

        'Go to game start';

      return (

        <li>

          <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

      );

    });

This code seems to be first mapping a built in variable "step" to variable "move", before essentially having this Python logic:

const moves = [lambda move: const desc = move ... for move in history]

As someone who is familiar with Python but not javascript, can you explain:

1) "step" variable is not assigned anywhere, and I haven't been able to google a built in step variable, so how is "step" getting assigned to the number of game moves?

2) What is the logic behind this syntax: (step, move) meaning first map step into move, then execute a lambda function? Primarily, the first 'map step into move' part doesn't make sense to me.

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

In the "Showing the Past Moves" section here, we have the below code:

const moves = history.map((step, move) => {

      const desc = move ?

        'Go to move #' + move :

        'Go to game start';

      return (

        <li>

          <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

      );

    });

This code seems to be first mapping a built in variable "step" to variable "move", before essentially having this Python logic:

const moves = [lambda move: const desc = move ... for move in history]

As someone who is familiar with Python but not javascript, can you explain:

1) "step" variable is not assigned anywhere, and I haven't been able to google a built in step variable, so how is "step" getting assigned to the number of game moves?

2) What is the logic behind this syntax: (step, move) meaning first map step into move, then execute a lambda function? Primarily, the first 'map step into move' part doesn't make sense to me.

javascript python reactjs

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

edited Jan 3 at 5:09

Praveen Rao Chavan.G

1,589821

asked Jan 3 at 5:05

user3180

329317

asked Jan 3 at 5:05

user3180

329317

asked Jan 3 at 5:05

user3180

329317

add a comment |

2 Answers
2

active

oldest

votes

The JavaScript Array map() function has the following syntax:

array.map(function(currentValue, index, arr), thisValue)

In this case, the step variable is the value of the current element of the history array being iterated by the map function. The move variable is the index of the current element.

Typically you use the map function to return a new array based upon the original array. In this case, they are iterating the history of moves and creating a new array of HTML <btn> elements based upon the history.

You could accomplish the same using forEach like so:

let moves = ;

history.forEach((step, move) => {

    const desc = move ?

          'Go to move #' + move :

          'Go to game start';

    moves.push(

        <li>

            <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

    );

});

answered Jan 3 at 5:24

Ben Beck

1,9731616

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

add a comment |

map is a function available on arrays. It is used to map all elements in the array to something else. For example, if you wanted to double all the elements in an array, you would:

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

It is equivalent to

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

In your case, history is an array. And you're mapping every step (just every element of history) to an li React element. There is no concept of 'map step into move' here. Also, move is just the index of the step in your array.

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016624%2freact-tutorial-history-map-step-move%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The JavaScript Array map() function has the following syntax:

array.map(function(currentValue, index, arr), thisValue)

In this case, the step variable is the value of the current element of the history array being iterated by the map function. The move variable is the index of the current element.

You could accomplish the same using forEach like so:

let moves = ;

history.forEach((step, move) => {

    const desc = move ?

          'Go to move #' + move :

          'Go to game start';

    moves.push(

        <li>

            <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

    );

});

answered Jan 3 at 5:24

Ben Beck

1,9731616

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

add a comment |

The JavaScript Array map() function has the following syntax:

array.map(function(currentValue, index, arr), thisValue)

In this case, the step variable is the value of the current element of the history array being iterated by the map function. The move variable is the index of the current element.

You could accomplish the same using forEach like so:

let moves = ;

history.forEach((step, move) => {

    const desc = move ?

          'Go to move #' + move :

          'Go to game start';

    moves.push(

        <li>

            <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

    );

});

answered Jan 3 at 5:24

Ben Beck

1,9731616

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

add a comment |

The JavaScript Array map() function has the following syntax:

array.map(function(currentValue, index, arr), thisValue)

In this case, the step variable is the value of the current element of the history array being iterated by the map function. The move variable is the index of the current element.

You could accomplish the same using forEach like so:

let moves = ;

history.forEach((step, move) => {

    const desc = move ?

          'Go to move #' + move :

          'Go to game start';

    moves.push(

        <li>

            <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

    );

});

answered Jan 3 at 5:24

Ben Beck

1,9731616

The JavaScript Array map() function has the following syntax:

array.map(function(currentValue, index, arr), thisValue)

In this case, the step variable is the value of the current element of the history array being iterated by the map function. The move variable is the index of the current element.

You could accomplish the same using forEach like so:

let moves = ;

history.forEach((step, move) => {

    const desc = move ?

          'Go to move #' + move :

          'Go to game start';

    moves.push(

        <li>

            <button onClick={() => this.jumpTo(move)}>{desc}</button>

        </li>

    );

});

answered Jan 3 at 5:24

Ben Beck

1,9731616

answered Jan 3 at 5:24

Ben Beck

1,9731616

answered Jan 3 at 5:24

Ben Beck

1,9731616

answered Jan 3 at 5:24

Ben Beck

1,9731616

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

add a comment |

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

Someone should ping the tutorial guys because naming each value of history 'step' is very confusing.. the currentValue should be labeled "squares" and index should be labeled "step" instead of currentValue as "step" and index as "move"

– user3180
Jan 3 at 5:33

@user3180 You can! Create a PR with what you think makes it easier to understand here

– Maaz Syed Adeeb
Jan 3 at 8:47

add a comment |

map is a function available on arrays. It is used to map all elements in the array to something else. For example, if you wanted to double all the elements in an array, you would:

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

It is equivalent to

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

add a comment |

map is a function available on arrays. It is used to map all elements in the array to something else. For example, if you wanted to double all the elements in an array, you would:

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

It is equivalent to

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

add a comment |

map is a function available on arrays. It is used to map all elements in the array to something else. For example, if you wanted to double all the elements in an array, you would:

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

It is equivalent to

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

map is a function available on arrays. It is used to map all elements in the array to something else. For example, if you wanted to double all the elements in an array, you would:

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

It is equivalent to

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

const arr = [1, 2, 3, 4];

const newArr = arr.map(element => element * 2)

console.log(newArr);

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

const arr = [1, 2, 3, 4];

const newArr = ;



for (var i = 0; i < arr.length; i++) {

  newArr.push(arr[i] * 2);

}



console.log(newArr);

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

answered Jan 3 at 5:25

Maaz Syed Adeeb

2,65721426

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu