React

Modern React From The Beginning EP8: Extracting Components


Subscribe On YouTube

Episodes

In the previous episode we’ve introduced state management into our React application. Thereby we’ve used state to management the current search text within App component. In this episode we’ll extract a separate Search component. Thus, we’ll keep the state still in App component. This enabled us to still use the state value to filter the list of courses and pass the filtered list to CoursesList component.

Let’s start refactoring our code.

Creating A New Search Component

Let’s first create a new file src/Search.js. This empty file is used to implement the new Search component which should be responsible to output the search input field and the corresponding label. The implementation is done by using a functional component and the code looks like the following:

import React from 'react';

const Search = ({onSearch}) => (
    <div>
        <label htmlFor="search">Search: </label>
        <input id="search" type="text" onChange={onSearch} />
    </div>
);

export default Search;

Here you can recognize a few concepts we’ve already learned about. The component is implemented by using an arrow function. Object destructuring is used for the props function parameter to directly pull out the onSearch prop. By using the onSearch prop the event handler function for the change event of the input element is passed into that component.

Importing Search Component

Having implemented Search component in Search.js we now need to add a corresponding import statement in App.js, so that we’re able to make use of this new component:

import Search from './Search';

Using Search Component

Within the JSX code the search component can then be added in the following way:

<Search onSearch={handleSearch} />

replacing the label and the input field which has been used before. As you can see the onSearch property is used to assign a handler function which is named handleSearch.

Handle The Search Event

The handleSearch event handler methods needs to be implemented within the App component function and is used to set the searchText state:

const handleSearch = event => {
    setSearchText(event.target.value);
}

Again, in the following you can see the complete code of the App component implementation after the refactoring work we’ve done:

import React, {useState} from 'react';
import CoursesList from './CoursesList';
import Search from './Search';

const courses = [
  ...
];

const App = () => {
  const [searchText, setSearchText] = useState('');

  const handleSearch = event => {
    setSearchText(event.target.value);
  }

  const filteredCourses = courses.filter(course => {
    return course.title.includes(searchText) || course.author.includes(searchText);
  });

  return (
    <div>
      <h1>List of Courses</h1>
      <hr />

      <Search onSearch={handleSearch} />
      
      <CoursesList courses={filteredCourses} />
    </div>
  );
}

export default App;

What’s Next

In the next part we’ll learn about the React Effect Hook (useEffect) which lets us perform side effects in functional components.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.