The ability to render multiple items of the same type, but with different props is a first class feature of React. And in this lesson we will look at the basics of loops and lists in React. So let's go to cover the basics. Consider a list of messages containing strings, which we want to display in different paragraph tags within our ui. Now if we give React an array of P elements, it would actually render that perfectly fine. So the objective turns to simply taking any given array and then using array map to convert it into JSX elements. Now, even though the list does appear

to render perfectly fine, there is actually a requirement within React to do this reliably. Each element must be assigned a unique key property and we can actually see this error being pointed out by React. If you were to open up the developer console, each child in a list should have a unique key prop. This is required so that as the state evolves react can reliably render only the items of the list That may have changed. Now we will look at more best practices in the next lesson. But the simplest way to get a unique key is to simply use the array index, which we can take as a second argument as that gets passed down by array map

and then assign it to the key prop of the route element that we are returning. And with this simple change in place, the error does go away. Now there are some simple requirements for this key property. It must be a string or a number, and it must be unique. So right now we are using the index as the key, which is of type number, but we could just as easily use the message, which is of type string. In addition to being of type string or number, the requirement is that the key must be unique. So if we have multiple messages that are exactly the same, then we cannot use message as a key.

And this gets pointed out as an error on the console. As an additional note, if you try to pass in something which is not a string and not a number for the key property, this does get caught by TypeScript at compile time. And we can see that being shown as an error over here. And now if you go back to the correct data types, for example, go back to I, which is of type number, this error goes away. Now, probably the most common use case for loops within React is when they are applied with custom components. As an example, consider a simple component that takes a message string as a single prop,

and this particular component will simply return a rendered P with the message contained between two music notes. Now, using this component within a loop is pretty simple. We replace our JSXP element with JSX lyric elements passing in the message prop note that we are also passing in the key prop, even though that is not something that the lyric component takes, and that is because this prop is handled by React itself. Now one more thing that I want to point out with the map is that here we are using the short form

of immediate return within the function, but we could just as easily replace it with a full blown function with the full blown return Statement. It's just that we finally need to return some JSX element that React can render. Now, there are additional best practices when working with loops and react js, which we will cover in their own dedicated lesson. Thank you for joining me, and I will see you in the next one.