Don't access special React properties |
Don't access the values of the 'ref' and 'key' special React properties directly
| CheckId | RCT010114 |
|---|---|
| TypeName | SpecialPropAccessRule |
| Severity | Error |
| Type | React component |
Don't access the values of the ref and key special React properties directly. If you need to access the same value, you should pass it using a different property.
Bad practice (directly accessing key)
export class Order extends React.Component {
render() {
return <div>ID: {this.props.key}, Amount: {this.props.amount}</div>;
}
}
render() {
return <div>ID: {this.props.key}, Amount: {this.props.amount}</div>;
}
}
Good practice (id passed in a separate property)
export class Order extends React.Component {
render() {
return <div>ID: {this.props.id}, Amount: {this.props.amount}</div>;
}
}
render() {
return <div>ID: {this.props.id}, Amount: {this.props.amount}</div>;
}
}
Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.