- Decide if you need state. Do we need state for this feature? If so, what components need access to that state? Initialize state in the closest common parent component to all the componenets that need access to it.
- Set up the initial state. What's a good initial value? What will we see on the page first? How will it change?
- Set up component to render something based on state. Do we need conditional rendering?
- Find a way to update state dynamically (based on user interaction). Add an event handler to a DOM element, and update state from the event handler.
In depth explanation: https://reactjs.org/docs/thinking-in-react.html
To update state in a parent component from an event in a child component:
- Define a callback function in the parent component that sets state
- Pass the callback function as a prop to the child
- Create an event handler in the child component
- Call the callback in the event handler with whatever data we're sending up to the parent
Example: https://codesandbox.io/s/120920-inverse-data-flow-exercise-tbhk9?file=/src/App.js
- For each input field in the form, define a state variable using useState
- Connect the input field's value to the state variable
<input value={state} /> - Set up an onChange handler and update state when the input field's value changes:
<input onChange={e => setState(e.target.value) /> - Set up an onSubmit hanlder on the
<form>and use the data from state when the form is submitted (i.e. make a POST request)
Example: https://codesandbox.io/s/120920-form-exercise-forked-07qop?file=/src/App.js
- Create an initial state with a value of an empty array, or null, to represent the initial value
- Set up a useEffect hook with an empty array as a second argument
useEffect(() => {}, []) - In the callback to useEffect, write your fetch function to GET data from the server. When you get the response, set state.
fetch(url).then(r => r.json).then(setState)
Example: https://codesandbox.io/s/120920-inverse-data-flow-exercise-tbhk9?file=/src/App.js
Note: You don't need to use useEffect for all fetch requests. Typically they are only used with GET requests. You can write other fetch requests in event handlers (onClick, onSubmit, etc).
When you have a feature that involves being able to sort or filter a list, you will need to add state and use that state to deterimine which items are visible.
- Create a state variable to represent how you are filtering:
const [phase, setPhase] = useState(1) - Use that variable to create a filtered array of the visible items you'd like to display:
const visibleItems = items.filter(item => item.phase === phase) - Use the filtered list to display the items:
const itemComponents = visibleItems.map(item => <Item key={item.id} item={item} /> - Update the state variable in order to change which items are displayed:
<button onClick={() => setPhase(2)>