(React Problem)
Let's say we have array of objects like this:
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,
},
];
Also we have an input and state like this:
const [text, setText] = useState("");
const handleOnChange = (event) => {
setText(event.target.value);
};
<input value={text} onChange={handleOnChange} />;
Now, I would like to filter this array depends on input text, and [author | title] property.
Example:
If user types 'M', the array of object should look like this:
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,
},
];
...because the author or title start with letter M.
Try the following:
const filteredBooks = books.filter(book => {
return book.title[0] === text || book.author[0] === text;
})
You should use a filter on your books array.
const filtered = books.filter(({author, title}) => author.includes(text) || title.includes(text)
This will filter with your text in ANY position on author or title. So in your example, if you type "S", you will have "William Shakespeare". If you want to search only from the begining, you can use startsWith instead of includes
Try this filter function:
books.filter(({
author,
title
}) => author.toLowerCase().includes(text.toLowerCase()) || title.toLowerCase().includes(text.toLowerCase()))