Menu
With the release of version 0.12 this.props.key is no longer available inside a component, however it sounds like you can simply replace that with this.key and everything should work as expected.
From the React v0.12 docs:
This means that you need to rename: someElement.props.key -> someElement.key
However when I try to access this.key within the render() function of my component, i get an undefined.
See my pen to illustrate the issue: http://codepen.io/anon/pen/jaczr?editors=100
Also:
Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as this.
How am I supposed to access a component's key?
UPDATE
There is this issue on GitHub that clarifies a lot. Thanks to HEAP for mentioning it.
638
In React when we use event handlers we basically give a reference of a function to that event handler and when that event occurs that function gets invoked, here's a catch, it's invoked at some point of time not immediately, and when its invoked, it's invoked as its own, there is now any components instance object ...
React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change.
Yes, that is true, key is a restricted keyword and doesn't get propagated as props. Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name: const content = posts.
The main purpose of keys is to help React differentiate and distinguish elements from each other, increasing its performance when diffing between the virtual and real DOM. To use keys, simply add the prop inside an element such as <li> . Unique IDs are the best value to assign to keys.
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used in React to identify which items in the list are changed, updated or deleted. In other words we can say that keys are used to give an indentity to the elements in the lists.
What the docs actually recommend (although it's badly worded) is that you should treat key and ref as internal to React and not accessible inside the component. If you need to know the key, simply pass it as another property with a different name and then access it on this.props as normal.
Note: Keys are not the same as props, only the method of assigning “key” to a component is the same as that of props. Keys are internal to React and can not be accessed from inside of the component like props.
In React, transforming arrays into lists of elements is nearly identical. You can build collections of elements and include them in JSX using curly braces {}. Below, we loop through the numbers array using the JavaScript map () function. We return a <li> element for each item.
What the docs actually recommend (although it's badly worded) is that you should treat key and ref as internal to React and not accessible inside the component. If you need to know the key, simply pass it as another property with a different name and then access it on this.props as normal.
http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props
Quote from above:
You can no longer access this.props.ref and this.props.key from inside the Component instance itself. So you need to use a different name for those props.
An example would be:
<MyComponent key={foo} reactKey={foo} /> Then accessing inside as this.props.reactKey.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
