Pass the key parameter for component response

Question

I am trying to pass a parameter called " key " for a responsive component, and it does not work. If I use " keyy " instead of "key", then it works.

It seems to me that the “key” is a limited keyword, and I cannot use it as a parameter name.

It's true?

This is my example:

render() { <MyComponent key='apple' keyy='pear'> } 

Answer 1

Yes, it’s true, the key is a limited keyword and is not distributed as a property.

---

The keys serve as a hint for an answer, but they are not passed on to your components . If you need the same value in your component, skip it explicitly as a support with a different name:

 const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> ); 

In the example above, the Post component can read props.id, but not props.key.

More in docs

Answer 2

Yes, the key keyword is reserved, it is used by React to identify html elements, it must be unique. This helps improve performance. We must add a key to every child. In this way, React can handle a minimal DOM change.

From React Docs :

Help on the keys. React which elements have been changed, added or deleted. Keys must be provided to elements within the array to give elements a strong identity. The keys used in arrays must be unique among their siblings. However, they do not have to be globally unique. Keys serve as a hint for the Response, but they are not transmitted to your components. If you need the same value in your component, skip it explicitly as a support with a different name.

Answer 3

key is a reserved word.

From here :

Help on the keys. React which elements have been changed, added or deleted. Keys must be given to elements within the array to give elements a strong identity:

The best way to choose a key is to use a string that uniquely identifies the list item among your siblings. Most often you will use identifiers from your data as keys.

This is also good and explains why React uses the key parameter and what benefits you get. You will find that the key parameter is the cornerstone of the React matching algorithm .

---

In addition to the key parameter, there are several reserved words that you should not use, for example:

ref and dangerouslySetInnerHTML

Later dangerouslySetInnerHTML you use instead of the DOM innerHTML

See here for more information.