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

Inline Handler in JSX

Explore how to manage stateful lists in React by using the useState Hook and handle item removal through callback and inline handlers. Discover methods like JavaScript's bind and arrow functions to pass arguments in JSX and understand their pros and cons for cleaner, more maintainable code.

We'll cover the following...

The list of stories we have so far is only an unstateful variable. We can filter the rendered list with the search feature, but the list itself stays intact if we remove the filter. The filter is just a temporary change through a third party, but we can’t manipulate the real list yet.

To gain control over the list, make it stateful by using it as initial state in React’s useState Hook. The returned values are the current state (stories) and the state updater function (setStories). We aren’t using the custom useSemiPersistentState hook yet, because we don’t want to open the browser with the cached list each time. Instead, we always want to start with the initial list.

Node.js
const initialStories = [
  {
    title: 'React',
    ...
  },
  {
    title: 'Redux',
    ...
  },
];
const useSemiPersistentState = (key, initialState) => { ... };
const App = () => {
  const [searchTerm, setSearchTerm] = ...
  const [stories, setStories] = React.useState(initialStories);
  ...
};

The application behaves the same because the stories, now returned from useState, are still filtered into searchedStories and displayed in the ...