(Problema de reacción)
Digamos que tenemos una matriz de objetos como este:
const books = [ { author: "Marcel Proust", title: "In Search of Lost Time", pageNumber: 123, }, { author: "James Joyce", title: "Ulysses", pageNumber: 123, }, { author: "Miguel de Cervantes", title: "Quixote", pageNumber: 123, }, { author: "Herman Melville", title: "Moby Dick", pageNumber: 123, }, { author: "William Shakespeare", title: "Hamlet", pageNumber: 123, }, ];También tenemos una entrada y un estado como este:
const [text, setText] = useState(""); const handleOnChange = (event) => { setText(event.target.value); }; <input value={text} onChange={handleOnChange} />;Ahora, me gustaría filtrar esta matriz según el texto de entrada, y [autor | título] propiedad.
Ejemplo:
Si el usuario escribe 'M', la matriz de objetos debería verse así:
const books = [ { author: "Marcel Proust", title: "In Search of Lost Time", pageNumber: 123, }, { author: "Miguel de Cervantes", title: "Quixote", pageNumber: 123, }, { author: "Herman Melville", title: "Moby Dick", pageNumber: 123, }, ];...porque el autor o el título comienzan con la letra M.
Prueba lo siguiente:
const filteredBooks = books.filter(book => { return book.title[0] === text || book.author[0] === text; })Debe usar un filtro en su matriz de books .
const filtered = books.filter(({author, title}) => author.includes(text) || title.includes(text) Esto filtrará con su texto en CUALQUIER posición en autor o título. Entonces, en su ejemplo, si escribe "S", tendrá "William Shakespeare". Si desea buscar solo desde el principio, puede usar startsWith en lugar de " includes ".
Pruebe esta función de filtro:
books.filter(({ author, title }) => author.toLowerCase().includes(text.toLowerCase()) || title.toLowerCase().includes(text.toLowerCase()))