Change:
The props and are reserved by React, and used internally. Component authors may attempt to access these properties (thinking they could read the value, as per ). We could use (in dev mode) to warn if or is accessed, and point the user to a note/discussion somewhere. That way, users who actually run into the issue will always get a timely message that sends them directly to the relevant explanation/discussion. This would be a good first bug, if we decide we actually want to do it.
This sounds like a great idea to me!
Yeah this seems reasonable.
hi, I am interested in working on this; as I am looking forward to contribute. Kindly show me the way. Thanks in advance!
Take a look at , that should give you a good start and a good idea of what we would be looking for.
Thanks Checking it out right away.
I have taken a look at the pull request, and associated code review comments. It seems the warn-once policy is required here, as implemented in I am not sure I fully understand how this module achieves this, so I am reading it now. As per the code review comments in , I am using the URLs instead of StackOverflow URLs. But the comments over there also mentioned that the PR might break some test cases. I am not sure about the edge cases here. I feel like I could use some help on understanding this. Instead of using GitHub issue comments, is it possible to use some chat-platform such as IRC or slack room or Gitter?
The module achieves deduplication by setting a boolean if it has already warned. The comments about breaking tests are referring to the failing unit tests. Just run and to verify that everything is working before pushing your changes. There are many places where you can discuss, including the IRC channel and/or reactiflux. There are also github issues (which is what our core team predominantly uses), as well as several other channels. The community is pretty big, but nothing is quite as good as reading through the code and github issues, IMHO.
Sorry, I was away. is ready to be reviewed.

Discussion:
var ReactCurrentOwner = require('ReactCurrentOwner'); var assign = require('Object.assign'); <ins> var warning = require('warning'); </ins> var canDefineProperty = require('canDefineProperty'); // The Symbol used to tag the ReactElement type. If there is no native Symbol

__source: true, }; <ins> var specialPropKeyWarningShown, specialPropRefWarningShown; </ins> /** * Factory method to create a new React element. This no longer adheres to * the class pattern, so do not use new to call it. Also, no instanceof check

var source = null; if (config != null) { <del> ref = config.ref === undefined ? null : config.ref; key = config.key === undefined ? null : '' + config.key; </del> <ins> if (__DEV__) { ref = !config.hasOwnProperty('ref') || Object.getOwnPropertyDescriptor(config, 'ref').get ? null : config.ref; key = !config.hasOwnProperty('key') || Object.getOwnPropertyDescriptor(config, 'key').get ? null : '' + config.key; } else { ref = config.ref === undefined ? null : config.ref; key = config.key === undefined ? null : '' + config.key; } </ins> self = config.__self === undefined ? null : config.__self; source = config.__source === undefined ? null : config.__source; // Remaining properties are added to a new props object

} } } <ins> if (__DEV__) { // Create dummy `key` and `ref` property to `props` to warn users // against its use if (typeof props.$$typeof === 'undefined' || props.$$typeof !== REACT_ELEMENT_TYPE) { if (!props.hasOwnProperty('key')) { Object.defineProperty(props, 'key', { get: function() { if (!specialPropKeyWarningShown) { specialPropKeyWarningShown = true; warning( false, '%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)', 'displayName' in type ? type.displayName: 'Element' ); } return undefined; }, configurable: true, }); } if (!props.hasOwnProperty('ref')) { Object.defineProperty(props, 'ref', { get: function() { if (!specialPropRefWarningShown) { specialPropRefWarningShown = true; warning( false, '%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)', 'displayName' in type ? type.displayName: 'Element' ); } return undefined; }, configurable: true, }); } } } </ins> return ReactElement( type, key,

expect(element.props).toEqual(expectation); }); <ins> it('should warn when `key` is being accessed', function() { spyOn(console, 'error'); var container = document.createElement('div'); var Child = React.createClass({ render: function() { return <div> {this.props.key} </div>; }, }); var Parent = React.createClass({ render: function() { return ( <div> <Child key="0" /> <Child key="1" /> <Child key="2" /> </div> ); }, }); expect(console.error.calls.length).toBe(0); ReactDOM.render(<Parent />, container); expect(console.error.calls.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'Child: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)' ); }); it('should warn when `ref` is being accessed', function() { spyOn(console, 'error'); var container = document.createElement('div'); var Child = React.createClass({ render: function() { return <div> {this.props.ref} </div>; }, }); var Parent = React.createClass({ render: function() { return ( <div> <Child ref="childElement" /> </div> ); }, }); expect(console.error.calls.length).toBe(0); ReactDOM.render(<Parent />, container); expect(console.error.calls.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'Child: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://fb.me/react-special-props)' ); }); </ins> it('allows a string to be passed as the type', function() { var element = React.createFactory('div')(); expect(element.type).toBe('div');