From 423a248c500c7f0753e213622f9918516c19ad1e Mon Sep 17 00:00:00 2001 From: Ran Yitzhaki Date: Thu, 1 Feb 2018 21:52:43 +0200 Subject: [PATCH 1/3] Note about special props in PropTypes typechecking --- content/warnings/special-props.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index cdd6b265..2c3adab7 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -6,4 +6,17 @@ permalink: warnings/special-props.html Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component. -For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. +For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. + +> Note: +> +> There is no need to validate special props using [PropTypes typechecking](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes). +> +> By defining `key` or `ref` PropTypes, React will try to access them during props validation phase in the development build. +> +> ```js +> ListItemWrapper.propTypes = { +> id: PropTypes.string, +> key: PropTypes.string // WARNING +> } +> ``` From e3e6cb89b5f5fc40b6846b7f8c5f129f6f2ccb5f Mon Sep 17 00:00:00 2001 From: Ran Yitzhaki Date: Thu, 1 Feb 2018 22:30:23 +0200 Subject: [PATCH 2/3] Make the note regarding special props in proptypes shorter --- content/warnings/special-props.md | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 2c3adab7..002183cc 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -8,15 +8,4 @@ Most props on a JSX element are passed on to the component, however, there are t For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. -> Note: -> -> There is no need to validate special props using [PropTypes typechecking](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes). -> -> By defining `key` or `ref` PropTypes, React will try to access them during props validation phase in the development build. -> -> ```js -> ListItemWrapper.propTypes = { -> id: PropTypes.string, -> key: PropTypes.string // WARNING -> } -> ``` +__Note:__ You will also see this warning if you define `key` or `ref` PropTypes (using [PropTypes typechecking](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)). From 71383d4667290f09efab42b7e22fbbe8d03fe069 Mon Sep 17 00:00:00 2001 From: Alex Date: Sun, 4 Feb 2018 22:48:23 -0800 Subject: [PATCH 3/3] Shorter, inline reference to propTypes --- content/warnings/special-props.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 002183cc..d1fa3f78 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -6,6 +6,4 @@ permalink: warnings/special-props.html Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component. -For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. - -__Note:__ You will also see this warning if you define `key` or `ref` PropTypes (using [PropTypes typechecking](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)). +For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints.