React App: Game Info Lookup

 const games = {

  'game1': { title: 'God of War', genre: 'Action', platform: 'PS4', rating: 9.5, year: 2018 },

  'game2': { title: 'Halo Infinite', genre: 'FPS', platform: 'Xbox', rating: 8.7, year: 2021 },

};

function GameInfo() {

  const [query, setQuery] = useState('');

  const [game, setGame] = useState(null);

  const searchGame = () => {

    const entry = Object.values(games).find(

      g => g.title.toLowerCase() === query.toLowerCase() || query === g.id

    );

    setGame(entry);

  };

  return (

    <div>

      <h1>Game Info</h1>

      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Enter game title or ID" />

      <button onClick={searchGame}>Search</button>

      {game ? (

        <div>

          <p>Title: {game.title}</p>

          <p>Genre: {game.genre}</p>

          <p>Platform: {game.platform}</p>

          <p>Rating: {game.rating}</p>

          <p>Release Year: {game.year}</p>

        </div>

      ) : query && <p>No game found.</p>}

    </div>

  );

}