Implementar filtro na barra de pesquisa | React

Atualmente estou estudando React, mas estou com dúvida de como posso usar o useState para aplicar um filtro ao meu projeto. Atualmente meu projeto está assim https://github.com/Lucas-SFernandez/porjeot-codeconnect/tree/master

Já implementei um filtro usando apenas HTML e JS , mas parece ser um pouco diferente quando se trata de React Esse é o código que usei no projeto anterios:

const barraDePesquisa = document.querySelector('.pesquisar__input');

barraDePesquisa.addEventListener('input', filtrarPesquisa);

function filtrarPesquisa() { const videos = document.querySelectorAll('.videos__item'); const valorFiltro = barraDePesquisa.value.toLowerCase();

videos.forEach((video) => {
    const titulo = video.querySelector('.titulo-video').textContent.toLowerCase();

    video.style.display = valorFiltro ? titulo.includes(valorFiltro) ? 'block' : 'none' : 'block';
});

}

Como posso aplicar um filtro parecido no meu novo projeto?

Pra aplicar um filtro semelhante no seu projeto React usando useState, a lógica será bastante parecida, mas você irá trabalhar de forma declarativa, utilizando o estado para armazenar o valor da barra de pesquisa e condicionalmente renderizar os itens filtrados.

Utilize o useState para armazenar o valor da barra de pesquisa.
Utilize o map e filter para renderizar apenas os itens que correspondem ao valor digitado.

import { useState } from "react";

function App() {
  const [searchValue, setSearchValue] = useState(""); // Estado para o valor da barra de pesquisa

  // Exemplo de lista de vídeos
  const videos = [
    { id: 1, title: "React Tutorial" },
    { id: 2, title: "JavaScript Basics" },
    { id: 3, title: "CSS Animations" },
    { id: 4, title: "HTML for Beginners" },
  ];

  // Função para lidar com a mudança do input
  const handleSearch = (event) => {
    setSearchValue(event.target.value.toLowerCase()); // Atualiza o estado com o valor da pesquisa
  };

  // Função para filtrar os vídeos com base na pesquisa
  const filteredVideos = videos.filter((video) =>
    video.title.toLowerCase().includes(searchValue)
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Pesquisar..."
        value={searchValue}
        onChange={handleSearch}
        className="pesquisar__input"
      />

      <div className="videos__list">
        {filteredVideos.map((video) => (
          <div key={video.id} className="videos__item">
            <h3 className="titulo-video">{video.title}</h3>
          </div>
        ))}

        {filteredVideos.length === 0 && <p>Nenhum vídeo encontrado.</p>}
      </div>
    </div>
  );
}

export default App;

Algo mais ou menos assim;

Mergulhe em programação