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

Popular posts from this blog

PHP Session Management Program

React App: Student Details by ID