02.1 Mapping array to <li>

[cgobbet]

Hi;

the exercise proposes us to tweak the function over the array below:
const animals = [ { label: 'Horse' }, { label: 'Turtle' }, { label: 'Elephan' }, { label: 'Monkey' } ];

but the video brings an answer for an different array:
const animals = ["Horse", "Turtle", "Elephant", "Monkey"];

The consequence is that the answer to the exercise given in the video

const animalsInHTML = animals.map((singleAnimal, i) => {
	return <li key={i}>{singleAnimal}</li>;
});

does not match as a right answer (check screenshot at https://i.imgur.com/eEEOvkC.png)

[alesanchezr]

Hi @cgobbet thanks for reporting this.

I'm trying to find the problem but I can't see it, this is the exercise you are talking about:
https://github.com/4GeeksAcademy/react-tutorial-exercises/tree/master/exercises/02.1-maping-array-objects-to-li

When I compare the video with the original source code they do match.

In your solution you are missing calling the .label property of the singleAnimal variable, lie this:

const animalsInHTML = animals.map((singleAnimal, i) => {
	return <li key={i}>{singleAnimal.label}</li>;  // <--- label
});

Maybe I'm missing something. 🤔

[cgobbet]

Hello, Alejandro, thanks for the reply. I've opened the issue because, the final code you propose in the video tutorial is different from the code provided by the exercise. The array `animals` in the exercise is an array of objects: const animals = [ { label: 'Horse' }, { label: 'Turtle' }, { label: 'Elephan' }, { label: 'Monkey' } ]; But in the tutorial, as you can see at https://i.imgur.com/YD5YFkZ.png , the array is: const animals = [ 'Horse','Turtle', 'Elephant', 'Monkey']; If I write the map function as the tutorial tells to, using an array of objects: It gives me an error: https://i.imgur.com/TvF8oAz.png <https://i.imgur.com/TvF8oAz.png> If the array is not an array of objects, it works ok: https://i.imgur.com/NosZTGW.png <https://i.imgur.com/NosZTGW.png> There is a small typo in “Elephant”, but it's not the culprit. Did this made sense? Let me know if it did not and I will try to to a video. In any case, thanks for the project. It is really helpful! Cassiano Gobbet <tel:>(+33) 0782559541 <tel:(+33)0782559541> cassiano.gobbet@gmail.com <mailto:cassiano.gobbet@gmail.com> <> <https://www.twitter.com/cassianogobbet> <http://www.linkedin.com/in/cassianogobbet> <http://thinking.media/> <skype:cassiano.gobbet?call>

…

On 17 May 2020, at 02:47, Alejandro Sanchez ***@***.***> wrote: Hi @cgobbet <https://github.com/cgobbet> thanks for reporting this. I'm trying to find the problem but I can't see it, this is the exercise you are talking about: https://github.com/4GeeksAcademy/react-tutorial-exercises/tree/master/exercises/02.1-maping-array-objects-to-li <https://github.com/4GeeksAcademy/react-tutorial-exercises/tree/master/exercises/02.1-maping-array-objects-to-li> When I compare the video with the original source code they do match. <https://user-images.githubusercontent.com/426452/82133147-322eee80-97b6-11ea-84b0-f5209c76bd27.png> In your solution you are missing calling the .label property of the singleAnimal variable, lie this: const animalsInHTML = animals.map((singleAnimal, i) => { return <li key={i}>{singleAnimal.label}</li>; // <--- label }); Maybe I'm missing something. 🤔 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABCWZOWUY4VDIAKMMP7A3MDRR4X23ANCNFSM4NCZ3EXA>.