What could be an example demonstrating the purpose of React "key" props?

Question

I am recently learning and researching about React. For practice purpose, I created a quiz app. And in the app, for every questions, there will be four options. However, I made a component named "Option" to implement it. But when I used them altogether, react suggested me to set a "key" props for every "Option" component. (Line 86)

What does this props do actually?
Or could we build a real example using this props?

Here is the code:

https://code.sololearn.com/W1Ba8cd5KO7A/?ref=app

Answer 1

You may find this interesting

https://www.nikgraf.com/blog/using-reacts-key-attribute-to-remount-a-component

From issue 186 of React Status

Answer 2

This doesn't directly answer your question(I think), but the other day, while I was looking at the React documentation, I found a explanation for this. Basically, the documentation(link is https://reactjs.org/docs/lists-and-keys.html) states:

"Keys help React identify which items have changed, are added, or are removed."

The page also leads to an "in-depth explanation about why keys are necessary": https://reactjs.org/docs/reconciliation.html#recursing-on-children.

Answer 3

Jianmin Chen Thanks for the links :))
Just now read them. I think I've got why it is used.

Actually I read an article where they built something using this props. I was wondering what else could be made :))

Answer 4

key helps react run its codes without error, mainly for react internal use.
Beside assigning unique key value, i would never use key for other code manipulation.

Answer 5

Burey and Calviղ Really thanks :))