Right now, we just display a list of Todo items through copying and pasting the component a bunch of times, but that's not very interesting, nor is it good programming practice! Instead, let's add our List component to our App and have that be responsible for handling multiple items. We'll start off by importing our new TodoList component from the local filesystem into src/App.js:

import TodoList from './TodoList';

We'll also need to change the render() function to use the TodoList component, instead of the two Todo components directly:

const App = () => (
  <div className="App">
    <h2>Todoifier</h2>
    <br />
    <TodoList />
  </div>
);

Everything should look almost the same, except since we changed the style sheet a little bit there should be a clean little blue box around the entire list. This helps us see the distinction between each component and the parent components surrounding it.