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;