Separation of concerns in React - Mini Project: Build & Apply

Separation of Concerns in React Components

📖 Scenario: You are building a simple React app that shows a list of books with their authors. To keep your code clean and easy to maintain, you want to separate the data, configuration, and display logic into different parts.

🎯 Goal: Build a React app that uses separate components and variables for the book data, a configuration for filtering, and a component that shows only books matching the filter.

📋 What You'll Learn

Create a list of books as an array of objects with exact titles and authors

Add a configuration variable to filter books by author name

Use a React functional component to filter and display the books based on the configuration

Use a separate child component to render each book's title and author

💡 Why This Matters

🌍 Real World

Separating concerns helps developers build React apps that are easier to read, test, and update. It is common to keep data, configuration, and UI components separate.

💼 Career

Understanding separation of concerns is essential for React developers to write maintainable code and collaborate effectively in teams.

1

Create the book data array

Create a constant array called books with these exact objects: { title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { title: '1984', author: 'George Orwell' }, and { title: 'To Kill a Mockingbird', author: 'Harper Lee' }.

React

// Create the books array with the given objects
// Your code here

Need a hint?

Use const books = [ ... ] with objects inside the array.

2

Add a filter configuration variable

Create a constant string called filterAuthor and set it to 'George Orwell'.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

// Create filterAuthor variable here
// Your code here

Need a hint?

Use const filterAuthor = 'George Orwell'; to set the filter.

3

Filter and display books in a React component

Create a React functional component called BookList that filters the books array using filterAuthor and returns a <div> containing a list of <BookItem> components for each filtered book. Use book.title and book.author as props for <BookItem>. Use book.title as the key.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

const filterAuthor = 'George Orwell';

// Create BookList component here
// Your code here

Need a hint?

Use books.filter inside BookList and map to <BookItem>.

4

Create the BookItem component

Create a React functional component called BookItem that accepts title and author as props and returns a <div> containing the book title in a <strong> and the author in a <em>.

React

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

const filterAuthor = 'George Orwell';

function BookList() {
  const filteredBooks = books.filter(book => book.author === filterAuthor);
  return (
    
      {filteredBooks.map(book => (
        
      ))}
    
  );
}

// Create BookItem component here
// Your code here

Need a hint?

Use props { title, author } and return a <div> with <strong> and <em>.