Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Callback Handlers in JSX

Explore how callback handlers enable upward data communication in React by passing functions through props. Learn to manage and share state between sibling components in JSX, crucial for building interactive user interfaces. This lesson helps you grasp the concept of callback functions and their role in component interaction.

We'll cover the following...

We’ll focus on the input field and label, by separating a standalone Search component and creating an instance of it in the App component. Through this process, the Search component becomes a sibling of the List component, and vice versa. We’ll also move the handler and the state into the Search component to keep our functionality intact.

Node.js
const App = () => {
  const stories = [ ... ];
  return (
    <div>
      <h1>My Hacker Stories</h1>
      <Search />
      <hr />
      <List list={stories} />
    </div>
  );
};
const Search = () => {
  const [searchTerm, setSearchTerm] = React.useState('');
  const handleChange = event => {
    setSearchTerm(event.target.value);
  };
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <p>
        Searching for <strong>{searchTerm}</strong>.
      </p>
    </div>
  );
};

We have an extracted Search component that handles ...