Search⌘ K
AI Features
Home
Courses
The Road to React: The One with Class Components

Split Up Components

Explore how to break down a large React component into smaller, manageable class components using ES6 syntax. Understand passing props and component reuse to improve organization and maintainability in your React applications.

We'll cover the following...

Now we have one large App component that keeps growing and may eventually become too complex to manage efficiently. We need to split it into smaller, more manageable parts by creating separate components for search input and the items list.

Javascript (babel-node)
class App extends Component {
  ...
  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App">
        <Search />
        <Table />
      </div>
    );
  }
}

We pass the components properties that ...