3.14 divide components into several component

In this lesson we extract the date area of ExpenseItem into its own component. Inside the components folder we create a new file called ExpenseDate.js that declares a function ExpenseDate and ends with a default export. 

function ExpenseDate(props) {
  return (
    <div>
      <div>{props.date.toLocaleString('en-US', { month: 'long' })}</div>
      <div>{props.date.getFullYear()}</div>
      <div>{props.date.getDate()}</div>
    </div>
  );
}

export default ExpenseDate;

Back inside ExpenseItem.js we remove the previous date constants — they are no longer needed there — and we instead render the new component, forwarding the date prop. A small correction from the previous lesson: we now use getFullYear() rather than toLocaleString for the year, and we read the month and day with getMonth() and getDate() respectively.

Plugging ExpenseDate back into ExpenseItem

  • Delete the local const declarations for date parts that lived inside ExpenseItem.
  • Add import ExpenseDate from './ExpenseDate'; at the top of ExpenseItem.js.
  • Replace the previous date block in the JSX with <ExpenseDate date={props.date} />.

We then create an ExpenseDate.css file next to ExpenseDate.js to host the dedicated styling and import it at the top of the component with import './ExpenseDate.css';. Inside the return we wrap the three sub-divs with a className="expense-date" root div so the CSS rules apply. Once saved, the application renders exactly as before — the visual result is identical, but the responsibilities are now cleanly separated between ExpenseItem and ExpenseDate. See you in the next lesson.

Summary

In this lesson, you'll refactor a React component by splitting it into smaller, reusable sub-components. Learn how to create a new `ExpenseDate` component, extract date-related code from the parent component, set up proper imports/exports, and add component-specific CSS styling. This practice improves code organization and maintainability by breaking large components into focused, single-responsibility modules.

Key points

  • Extract logic and JSX from parent components into new dedicated component files (e.g., ExpenseDate.js)
  • Use proper ES6 imports and exports to connect parent and child components (`import ExpenseDate from './ExpenseDate'`)
  • Create component-specific CSS files and import them within the component for better style organization
  • Remove duplicated code from the parent component after extracting it to the child component
  • Test the refactored components to ensure all functionality works correctly after splitting
  • Each component should have a single responsibility, making your codebase more scalable and maintainable

FAQ

Why should I divide components into smaller pieces?

Smaller components are easier to understand, test, and reuse. By following the single responsibility principle, each component handles one specific task, which makes your codebase more maintainable and scalable as your application grows.

How do I properly import and export a new component?

In your new component file, use `export function ComponentName(props) { ... }` or `export default ComponentName` at the top. In the parent component, import it using `import ComponentName from './path/to/ComponentName'`.

Should I create separate CSS files for each component?

Yes, creating component-specific CSS files (like `ComponentName.css`) keeps styles organized, prevents naming conflicts, and makes it easier to maintain styles alongside your component code. Always import the CSS file at the top of your component.