Add keys when list of elements are used

[MatteoRobbiati]

The problem is that whenever you have a list of renderables (objects that are displayed on the page), you should add a key identifying each of them, otherwise if you change one React has no clue to find out which is changed, and it has to redraw the full set. If you identify them by keys (that should be related as much as possible to the role of the element), the moment you add/drop/modify one only that one is changed (DOM operations are invoked on that element alone), and the other ones are kept, with improved performances.

Originally posted by @AleCandido in https://github.com/qibogang/qibogang.github.io/issues/43#issuecomment-1348071908

[alecandido]

Yes, it is clear. In this case the only one situation in which I use a list of elements is when I fetch and render the markdowns in the [slug].js page. And this is done here using the map function.

The problem is not the map function per se, even if you're using it, but what you're mapping to https://github.com/qibogang/qibogang.github.io/blob/754d06852384ea3af0b292ae49a91a7abb549f5b/pages/tutorials.js#L40 Simply, you should add a key attribute to the tag:

 <Tutorial tutorial={tutorial} key={tutorial}/> 

(assuming tutorial to be the name of the tutorial, otherwise use key={tutorial.name} or replace with the name in the most suitable way)