Last active
November 25, 2019 23:19
-
-
Save ozziexsh/01d942206b7ce227a2e1a02b98728666 to your computer and use it in GitHub Desktop.
Revisions
-
ozziexsh revised this gist
Nov 25, 2019 . 1 changed file with 46 additions and 46 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -10,18 +10,18 @@ class ComponentWithState extends React.Component { } } onButtonClicked() { this.setState({ counter: this.state.counter + 1 }) } render() { return ( <div> <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button> <h1>My name is {this.state.name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } @@ -42,65 +42,65 @@ function ComponentWithState(props) { ```javascript function ComponentWithState(props) { return ( <div> <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button> <h1>My name is {this.state.name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } ``` 3. For every property inside the class constructor `this.state` , create an equivalent useState. Make sure anywhere that references e.g. `this.state.counter` you swap out with the new state variable which is just `counter` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); return ( <div> <button onClick={this.onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } ``` 4. Find any instances of `this.props` and make it just `props` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); return ( <div> <button onClick={this.onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {props.fruit}</p> </div> ) } ``` 5. Replace any event handlers (e.g. onChange or onClick) functions into functions defined inside our component. Also replace any instances of `this.setState({})` with the appropriate `setX` variable we've created using `useState` . Make sure to then update the `onClick={this.onButtonClicked}` to just be `onClick={onButtonClicked}` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); function onButtonClicked() { setCounter(counter + 1) } return ( <div> <button onClick={onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {props.fruit}</p> </div> ) } ``` -
Nov 25, 2019 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,106 @@ ```javascript import React from 'react'; class ComponentWithState extends React.Component { constructor(props) { super(props); this.state = { counter: 0, name: '', } } onButtonClicked() { this.setState({ counter: this.state.counter + 1 }) } render() { return ( <div> <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button> <h1>My name is {this.state.name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } } export default ComponentWithState; ``` 1. Create function with the same name as class, and take props in as the only parameter ```javascript function ComponentWithState(props) { } ``` 2. Copy return portion of the "render" function in the class into the body of the function ```javascript function ComponentWithState(props) { return ( <div> <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button> <h1>My name is {this.state.name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } ``` 3. For every property inside the class constructor `this.state` , create an equivalent useState. Make sure anywhere that references e.g. `this.state.counter` you swap out with the new state variable which is just `counter` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); return ( <div> <button onClick={this.onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {this.props.fruit}</p> </div> ) } ``` 4. Find any instances of `this.props` and make it just `props` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); return ( <div> <button onClick={this.onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {props.fruit}</p> </div> ) } ``` 5. Replace any event handlers (e.g. onChange or onClick) functions into functions defined inside our component. Also replace any instances of `this.setState({})` with the appropriate `setX` variable we've created using `useState` . Make sure to then update the `onClick={this.onButtonClicked}` to just be `onClick={onButtonClicked}` ```javascript function ComponentWithState(props) { const [counter, setCounter] = React.useState(0); const [name, setName] = React.useState(''); function onButtonClicked() { setCounter(counter + 1) } return ( <div> <button onClick={onButtonClicked}>Clicked {counter} times</button> <h1>My name is {name}</h1> <p>Fruit passed in as prop {props.fruit}</p> </div> ) } ```