1 - Setting Up the UI

Setting Up the UI with Raffle’s API.

Begin by setting up a simple user interface. This will include:

  • A text input field for entering the query.
  • A button to trigger the search.
  • Placeholders to display:
    • Top Questions
    • Suggestions
    • Search Results
    • Summary

Step Implementation

Here’s the basic implementation of the UI:

import { useState } from "react";

export const Search = () => {
  const [query, setQuery] = useState("");

  const handleSearch = () => {
    if (query.trim()) {
      console.log("Search triggered with query:", query.trim());
    }
  };

  return (
    <div>
      <h1>Search API - React Example</h1>
      <div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Enter your query..."
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      <div>
        <h2>Top Questions</h2>
        <p>Top Questions will appear here...</p>
      </div>

      <div>
        <h2>Suggestions</h2>
        <p>Suggestions will appear here...</p>
      </div>

      <div>
        <h2>Summary</h2>
        <p>Summary will appear here...</p>
      </div>

      <div>
        <h2>Search Results</h2>
        <p>Search results will appear here...</p>
      </div>
    </div>
  );
};

Explanation

  1. State Management: The query state stores the user’s input.
  2. Search Handler: handleSearch logs the trimmed query when the search button is clicked.
  3. UI Placeholders: Sections for “Top Questions,” “Suggestions,” “Summary,” and “Search Results” are defined but not yet functional.

Next Page

2 - Add Top Questions