React App: Book Search
import React, { useState } from 'react';
const dummyBooks = [
{ title: "1984", author: "George Orwell", year: 1949, description: "Dystopian novel" },
{ title: "Animal Farm", author: "George Orwell", year: 1945, description: "Political allegory" },
{ title: "Brave New World", author: "Aldous Huxley", year: 1932, description: "Futuristic society" },
];
function App() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const searchBooks = () => {
const filtered = dummyBooks.filter(book =>
book.title.toLowerCase().includes(query.toLowerCase()) ||
book.author.toLowerCase().includes(query.toLowerCase())
);
setResults(filtered);
};
return (
<div>
<h1>Book Search</h1>
<input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Enter book title or author" />
<button onClick={searchBooks}>Search</button>
<ul>
{results.map((book, index) => (
<li key={index}>
<strong>{book.title}</strong> by {book.author} ({book.year}) - {book.description}
</li>
))}
</ul>
</div>
);
}
export default App;
Comments
Post a Comment