Last active
October 25, 2020 04:40
-
-
Save Ivsath/5ff802c816a7d51cf0d723a95805ed89 to your computer and use it in GitHub Desktop.
HooksReact
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 characters
| import React from 'react' | |
| function UsernameForm({onSubmitUsername}) { | |
| const [username, setUsername] = React.useState('') | |
| function handleSubmit(event) { | |
| event.preventDefault() | |
| onSubmitUsername(username) | |
| } | |
| function handleChange(event) { | |
| setUsername(event.target.value.toLowerCase()) | |
| } | |
| return ( | |
| <form onSubmit={handleSubmit}> | |
| <div> | |
| <label htmlFor="usernameInput">Username:</label> | |
| <input | |
| id="usernameInput" | |
| type="text" | |
| onChange={handleChange} | |
| value={username} | |
| /> | |
| </div> | |
| <button type="submit">Submit</button> | |
| </form> | |
| ) | |
| } | |
| function App() { | |
| const onSubmitUsername = username => alert(`You entered: ${username}`) | |
| return ( | |
| <div style={{minWidth: 400}}> | |
| <UsernameForm onSubmitUsername={onSubmitUsername} /> | |
| </div> | |
| ) | |
| } | |
| export default App |
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 characters
| // useEffect: persistent state | |
| // lazy state initialization | |
| import React from 'react' | |
| function Greeting({initialName = ''}) { | |
| // Basically just pass a function, only use it when doing a heavy operation | |
| // so it wont run again after changing the state | |
| const [name, setName] = React.useState( | |
| () => window.localStorage.getItem('name') || initialName, | |
| ) | |
| React.useEffect(() => { | |
| window.localStorage.setItem('name', name) | |
| }, [name]) | |
| function handleChange(event) { | |
| setName(event.target.value) | |
| } | |
| return ( | |
| <div> | |
| <form> | |
| <label htmlFor="name">Name: </label> | |
| <input value={name} onChange={handleChange} id="name" /> | |
| </form> | |
| {name ? <strong>Hello {name}</strong> : 'Please type your name'} | |
| </div> | |
| ) | |
| } | |
| function App() { | |
| return <Greeting /> | |
| } | |
| export default App |
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 characters
| import React from 'react' | |
| function UsernameForm({onSubmitUsername}) { | |
| const usernameInputRef = React.useRef() | |
| function handleSubmit(event) { | |
| event.preventDefault() | |
| onSubmitUsername(usernameInputRef.current.value) | |
| } | |
| return ( | |
| <form onSubmit={handleSubmit}> | |
| <div> | |
| <label htmlFor="usernameInput">Username:</label> | |
| <input id="usernameInput" type="text" ref={usernameInputRef} /> | |
| </div> | |
| <button type="submit">Submit</button> | |
| </form> | |
| ) | |
| } | |
| function App() { | |
| const onSubmitUsername = username => alert(`You entered: ${username}`) | |
| return <UsernameForm onSubmitUsername={onSubmitUsername} /> | |
| } | |
| export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment