0

Eu estou desenvolvendo um app simples utilizando o ReactJS e estou tentando utilizar um [filter()] para renderizar os resultados de um array utilizando um campo de busca. Mas quando eu utilizo o [map()] funciona perfeitamente, porque os resultados do [filter()] aparecem no console.log() mas não na minha pagina HTML ?

app.js

import React , { useState, useEffect } from 'react';

import List from './components/list';

const App = () => {

  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  return (
    <>
      <form>
        <input type="text" className="names" onChange = { e =>  setName( e.target.value ) }  />
        <input type="text" className="ages" onChange = { e =>  setAge( e.target.value ) }  />
      </form>
      {/* My User List */}
      <ul>
        <List data = { { name, age } } />
      </ul>
    </>
  );
}

export default App;

components/list.jsx

import React, { useState, useEffect } from 'react';

const List = ({ data }) => {
    
    // The states
    const [filtro, setFiltro] = useState([]);
    
    // All registers
    let cadastros = [
        { id: 0, name: "David", age: '20' },
        { id: 1, name: "Bob", age: '20' },
        { id: 2, name: "Bob", age: '10' },
        { id: 3, name: "Bob", age: '20' },
        { id: 4, name: "Chris", age: '10' },
    ];

// const result = cadastros.map( user => user.name );
const result = cadastros.filter( user => user.name === data.name );

console.log( result );

return <li key = { result.id }> { result.name } </li>;

}

// Export component
export default List;

1 Resposta 1

1

O ponto ai é que o retorno do seu filter também é um array, para exibir em tela você precisa percorrer esse array e retornar o JSX.

const results = cadastros.filter( user => user.name === data.name );

return results.map(result => <li key = { result.id }> { result.name } </li>);
1
  • 1
    Verdade, faz sentido. Obrigado Commented 26/12/2021 às 18:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .