diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md index 2f81d080..cbe07132 100644 --- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md +++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md @@ -135,7 +135,7 @@ function EmailInput(props) { } ``` -This approach simplifies the implementation of our component but it also has a potential downside: our component now requires more effort to use. For example, the parent form component will now also need to manage "draft" (unsaved) email state. +This approach simplifies the implementation of our component but it also has a potential downside: our component now requires more effort to use. For example, the parent form component will now also need to manage "draft" (unsaved) email state. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/7154w1l551)) #### Alternative 2: Fully uncontrolled component @@ -170,6 +170,8 @@ One approach would be to use a special React attribute called `key`. React uses /> ``` +([Click here to see a demo of this pattern.](https://codesandbox.io/s/6v1znlxyxn)) + > Note > > With this approach, you don't have to add `key` to every input. It might make more sense to put a `key` on the whole form instead. Every time the key changes, all components within the form will be re-created with a freshly initialized state. @@ -206,6 +208,8 @@ class EmailInput extends Component { } ``` +([Click here to see a demo of this pattern.](https://codesandbox.io/s/rjyvp7l3rq)) + > Note > > Even though the example above shows `getDerivedStateFromProps`, the same technique can be used with `componentWillReceiveProps`. @@ -230,7 +234,7 @@ class EmailInput extends Component { } ``` -The parent form component could then [use a `ref` to call this method](/docs/glossary.html#refs). +The parent form component could then [use a `ref` to call this method](/docs/glossary.html#refs). ([Click here to see a demo of this pattern.](https://codesandbox.io/s/l70krvpykl)) > Note >