DEV Community: Brice VIGNAL

Creating a Searchable Video List in React

Brice VIGNAL — Wed, 27 Dec 2023 19:12:52 +0000

In this tutorial, we will explore how to build a simple React application that allows users to search through a list of videos. We'll create a basic video list with a search functionality using React's state management.

Setting Up the React Project

To get started, let's create a new React project using Create React App. Open your terminal and run the following commands:

npm create vite searchable-video-list cd searchable-video-list

This will set up a new React project for you.

Creating the Video Component

Our first step is to create a component that represents an individual video. Create a file named Video.js with the following content:

// Video.js
import React from 'react';

const Video = ({ title, url }) => (
  <div>
    <h3>{title}</h3>
    <iframe
      title={title}
      width="560"
      height="315"
      src={url}
      frameBorder="0"
      allowFullScreen
    ></iframe>
  </div>
);

export default Video;

This component takes title and url as props and displays a simple video player with an iframe.

Building the VideoList Component

Next, let's create a VideoList component that will display a list of videos. Create a file named VideoList.js with the following content:

// VideoList.js
import React, { useState } from "react";
import Video from "./Video";


const VideoList = ({ videos }) => {

  return (
      <div
        style={{
          marginTop: 20,
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 20,
        }}
      >
        {videos.map((video) => (
          <Video key={video.id} {...video} />
        ))}
      </div>
  );
};

export default VideoList;

Creating the SearchInput Component

This component includes a search input that updates the searchTerm state. It then filters the videos based on the search term and displays the filtered videos.

Create a file named SearchInput.js with the following content:

\\ SearchInput.js
import React from "react";

const SearchInput = ({ searchTerm, setSearchTerm }) => {
  return (
    <input
      type="text"
      placeholder="Search videos"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};

export default SearchInput;

Integrating Components in the App

Now, let's integrate these components into our main App.js file:

// App.js
import React from 'react';
import VideoList from './VideoList';
import SearchInput from './SearchInput';

const App = () => {

  const [searchTerm, setSearchTerm] = useState("");

  const videos = [
    { id: 1, title: 'Video 1', url: 'https://www.youtube.com/embed/VIDEO_ID1' },
    { id: 2, title: 'Video 2', url: 'https://www.youtube.com/embed/VIDEO_ID2' },
    // Add more videos as needed
  ];

  const filteredVideos = videos
.filter((video) => video.title.toLowerCase()
.includes(searchTerm.toLowerCase()));


  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <h1>Searchable Video List</h1>
      <SearchInput 
        searchTerm={searchTerm} 
        setSearchTerm={setSearchTerm} />
      <VideoList videos={filteredVideos} />
    </div>
  );
};

export default App;

In this file, we import the VideoList and SearchInput components and provide a list of video objects as props. The main app component renders the video list with a title.

Conclusion

Congratulations! You've built a basic React application with a searchable video list.

This example demonstrates how React's state management can be leveraged to create dynamic and interactive user interfaces. Feel free to customize and extend this example based on your specific needs, such as fetching video data from an API or adding more details to the video component. Happy coding!