Todo List > Importing shared components

Importing shared components

You can see we've now refactored our app to move shared styled components out of App.js and into their own files. This cleans our app up a bit and allows a separation from style and business logic. We're now exporting a default array of tasks from tasks.js and have begun to create files to export React components from our app.

Exporting styled-components

If you go to Button.js and Subheader.js you can see that we're now exporting pure styled components from these files. These can be imported and used like any other React component.

Your mission

Move functional component Task and styled-component Header out of App.js and into their own files. Export them as default components and import them into App.js. Note: TaskName can be defined inside of Task.js above the default component.

Lesson 3/20

import styled from "styled-components";
// Importing shared components
import Subheader from "./Subheader";
import Button from "./Button";
// Importing data
import tasks from "./tasks";

const Header = styled.h1`
  font-size: 32px; 
`;

const TaskName = styled.div`
  margin: 10px 0px; 
`;

function Task({ name }) {
  return <TaskName> {name} </TaskName>;
}

export default function App() {
  return (
    <div>
      <Header> 🏴‍☠️ Captain's Tasks </Header>
      <Subheader> Manage the daily jobs at sea </Subheader>
      <Button onClick={() => alert("Adding task")}>Add Task</Button>
      {tasks.map(({ name, id }, i) => (
        <Task key={`task-${id}`} name={name} />
      ))}
    </div>
  );
}

Open Sandbox