Dynamic rendering

Dynamic Rendering

Sometimes we don't know how many elements we would like to render. The react provides a very nice way by using the map function in order to create elements on the fly. We can instantiate an array, and then push, or remove elements from there. Then we can loop through the array, and create as many HTML elements as the length of the array. For that we use the map function.

The component above will render only 3 elements (and no paragraph). The key inside is almost mandatory, so react can remember the exact order that each h1 was rendered on the beginning and doesn't have to do the same procedure from the beginning if a new title is added to the multipleTitles variable. As convention we use the index of every map function.

Attention: The absence of a key attribute will not produce an error, but a warning. Key should go always to outer element of the map function and no deeper inside.