Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Filtragem de Lista de Carros | React Hooks and Context
Mastering React

Desafio: Filtragem de Lista de CarrosDesafio: Filtragem de Lista de Carros

Tarefa

Crie o componente CarList responsável por renderizar uma lista de carros e fornecer uma funcionalidade de pesquisa para filtrá-los com base em seus nomes. Ele permite que os usuários digitem um termo de busca e filtra dinamicamente a lista de carros com base nessa entrada.

Instruções

  1. Importe os hooks necessários da biblioteca React.
  2. Dentro do componente CarList, declare uma variável de estado searchInput e uma função de atualização de estado setSearchInput usando o hook useState. Inicialize searchInput com uma string vazia.
  3. Use o hook useMemo para memorizar o array filteredCars. A lógica de memorização deve filtrar os carros com base no searchInput. Se searchInput estiver vazio, retorne todos os carros; caso contrário, filtre os carros com base na entrada de busca.
  4. No array de dependências do useMemo, especifique as variáveis corretas nas quais a função memorizada depende.
Hint
1. To import the necessary hook from the React library, include an import statement.
2. Use the useState hook to declare a state variable and its updater function.
3. The useMemo hook is used to memoize the filtered cars array, preventing unnecessary recalculations.
4. In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).
  1. Include an import statement to import the necessary hook from the React library.
  2. Use the useState hook to declare a state variable and its updater function.
  3. The useMemo hook memoizes the filtered cars array, preventing unnecessary recalculations.
  4. In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).

Tudo estava claro?

Seção 3. Capítulo 9
course content

Conteúdo do Curso

Mastering React

1. Introdução aos Fundamentos do React

O que é React?SPAs vs. MPAs no Desenvolvimento WebComo o React Funciona com o DOM VirtualApresentando JSX no ReactCriando Elementos JSX ComplexosRenderizando Elementos no ReactDesafio: Renderizar ElementoComponente ReactPropriedades no ReactDesafio: Componentes FuncionaisRenderização CondicionalDesafio: Renderizar Conteúdo CondicionalmenteChallenge: Conditional Rendering - Bank AlertRealizar uma Coleta de DadosDesafio: Executar uma Coleta de DadosIntrodução ao Resumo da Seção React

2. Estilização em Aplicações React

Introdução ao Estilo no ReactEstilos InlineEstilos Inline na PráticaDesafio: Estilos InlineEstilização com o Arquivo CSSEstilizando com o Arquivo CSS na PráticaDesafio: Estilização com o Arquivo CSSEstilizando com os Módulos CSSOrganização da Estrutura de Pastas de ArquivosDesafio: Módulos CSSEstilização na Seção de Resumo do React

3. Hooks do React e Contexto

Introdução: React Hooks e ContextoHook useStateDesafio: Alternar VisibilidadeHook useRefDesafio: Criar um Componente de FormulárioHook useEffectDesafio: Buscar e Exibir DadosHook useMemoDesafio: Filtragem de Lista de CarrosContextoContexto na PráticaDesafio: Aplicativo Mundo da AstronomiaResumo da Seção de Hooks e Contexto do React

4. React no Mundo Real

Configurando AmbienteEditor de CódigoConfigurando a Pasta do ProjetoTerminalIniciar o ProjetoReagir no Mundo Real: Resumo da Seção

Mastering React

Desafio: Filtragem de Lista de CarrosDesafio: Filtragem de Lista de Carros

Tarefa

Crie o componente CarList responsável por renderizar uma lista de carros e fornecer uma funcionalidade de pesquisa para filtrá-los com base em seus nomes. Ele permite que os usuários digitem um termo de busca e filtra dinamicamente a lista de carros com base nessa entrada.

Instruções

  1. Importe os hooks necessários da biblioteca React.
  2. Dentro do componente CarList, declare uma variável de estado searchInput e uma função de atualização de estado setSearchInput usando o hook useState. Inicialize searchInput com uma string vazia.
  3. Use o hook useMemo para memorizar o array filteredCars. A lógica de memorização deve filtrar os carros com base no searchInput. Se searchInput estiver vazio, retorne todos os carros; caso contrário, filtre os carros com base na entrada de busca.
  4. No array de dependências do useMemo, especifique as variáveis corretas nas quais a função memorizada depende.
Hint
1. To import the necessary hook from the React library, include an import statement.
2. Use the useState hook to declare a state variable and its updater function.
3. The useMemo hook is used to memoize the filtered cars array, preventing unnecessary recalculations.
4. In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).
  1. Include an import statement to import the necessary hook from the React library.
  2. Use the useState hook to declare a state variable and its updater function.
  3. The useMemo hook memoizes the filtered cars array, preventing unnecessary recalculations.
  4. In the dependency array of useMemo, include the variables that the memoized function depends on (cars and searchInput).

Tudo estava claro?

Seção 3. Capítulo 9
some-alt