React Colour Filter Application

Introduction

In this project, you will learn how to build a colour filter application using React. The application will allow users to filter a list of colours by typing in the name of the colour they are looking for. This project will help you understand how to work with state management, event handling, and conditional rendering in React.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up a React project and manage dependencies
• How to implement a real-time colour filtering functionality
• How to style the application using CSS

🏆 Achievements

After completing this project, you will be able to:

• Set up a React project and install dependencies
• Utilize state management in React to filter data
• Handle user input events and update the UI accordingly
• Style a React application using CSS

Skills Graph

Set Up the Project

In this step, you will learn how to set up the project and install the necessary dependencies.

Open your code editor and navigate to the project directory.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Next, download the dependencies using the npm install command in the terminal, wait for the dependencies to finish downloading and then start the project using the npm start command.

Once the project starts successfully, click on the "Web 8080" to preview it in your browser.

Implement the Colour Filter

In this step, you will implement the colour filter functionality.

1. Open the App.js file in your code editor.

2. In this file, import the necessary dependencies:

   import React, { useState } from "react";

3. Add a state variable inside const App = () => {} to store the filtered list of colors:

   const [filteredList, setFilteredList] = useState(colors);

4. Implement the handleOnChange function to filter the colour list based on the user's input:

   const handleOnChange = (e) => {
     const value = e.target.value;
     if (!value) {
       setFilteredList(colors);
     }
   
     const filtered = colors.filter((c) =>
       c.name.toUpperCase().includes(value.toUpperCase())
     );
     setFilteredList(filtered);
   };

5. Render the input field and the filtered list of colours:

   return (
     <div className="app">
       <input
         className="filter-input"
         type="text"
         name="filter"
         placeholder="Enter a colour name to see filtered results"
         onChange={handleOnChange}
       />
       <div className="list">
         {filteredList.map((c) => {
           return (
             <div
               className="list-item"
               key={c.name}
               style={{ backgroundColor: c.hex }}
             >
               {c.name}
             </div>
           );
         })}
       </div>
     </div>
   );

6. The complete code within const App = () => {} is as follows:

const App = () => {
  const [filteredList, setFilteredList] = useState(colors);

  const handleOnChange = (e) => {
    const value = e.target.value;
    if (!value) {
      setFilteredList(colors);
    }

    const filtered = colors.filter((c) =>
      c.name.toUpperCase().includes(value.toUpperCase())
    );
    setFilteredList(filtered);
  };

  return (
    <div className="app">
      <input
        className="filter-input"
        type="text"
        name="filter"
        placeholder="Enter a colour name to see filtered results"
        onChange={handleOnChange}
      />
      <div className="list">
        {filteredList.map((c) => {
          return (
            <div
              className="list-item"
              key={c.name}
              style={{ backgroundColor: c.hex }}
            >
              {c.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

7. Save the App.js file, and the application should now filter the colour list in real-time as the user types in the input field.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.