• Review the Component Hierarchy and the flow of information through it
• Pass data up with callback functions, and down with props
• Use event in a child component to change the state of a parent component
• Explore “lifting” state and its importance in React

• Segment 1: Lifting State
  • Explain what it means to lift state in React
  • Demonstrate lifting state into parent component
• Segment 2: Inverse Data Flow
  • Pass callback functions as props
  • Use an event in a child component to change the state of a parent component
  • Solve a simple click handler with callback function
  • Execute parent state change from child component
• Segment 3: Practice
  • Additional Practice / Questions

1. Decide: Do we need state for this feature? If so, where?
2. Set up the initial state. What's a good initial value? What will we see on the page first? How will it change?
3. Set up component to render something based on state. Do we need conditional rendering?
4. Find a way to update state dynamically (based on user interaction; fetching data; etc).

1. Define a event handler in the child component
2. Define a callback function in the parent component
3. Pass the callback function as a prop to the child
4. Call the callback in the event handler with whatever data we're sending up

In React, we only have one way to share information between multiple components: props. We've seen how to use props to send data from a parent component to a child component, like this:

function Parent() {
  const [search, setSearch] = useState("");

  // passing search down as a prop
  return <Child search={search} />;
}

function Child({ search }) {
  return (
    <div>
      <p>You searched for: {search}</p>
    </div>
  );
}

It's also helpful to be able to pass data up from a child to a parent. In React, the only way to achieve this is by sending a callback function down from the parent to the child via props, and call that callback function in the child to send up data that we need.

First, we need to define a callback function in the parent component:

function Parent() {
  const [search, setSearch] = useState("");

  function handleSearchChange(newValue) {
    // do whatever we want with the data (usually setting state)
    setSearch(newValue);
  }

  return <Child search={search} />;
}

Then, we need to pass a reference to the function down as a prop to the child component:

function Parent() {
  const [search, setSearch] = useState("");

  function handleSearchChange(newValue) {
    setSearch(newValue);
  }

  // pass down a reference to the function as a prop
  return <Child search={search} onSearchChange={handleSearchChange} />;
}

In our child component, we'll be able to call the callback function with whatever data we want to send up to the parent:

function Child({ search, onSearchChange }) {
  return (
    <div>
      <p>You searched for: {search}</p>

      {/* call onSearchChange and pass up some data */}
      <input type="text" onChange={(e) => onSearchChange(e.target.value)} />
    </div>
  );
}

Lifting State Up

• Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.
• If two sibling components need access to the same state, you will want to place the shared state in a parent container. Then you can pass down that state as well as any functions that need to modify the state as props to the two sibling components that need to display and/or change that data.