Question

Design an interactive page making use of React Hooks that displays four buttons namely, “Red”, “Blue”, “Green”, “Yellow”. On clicking any of these buttons, the code displays the message that you have selected that particular color.

Answer 1

import React, { useState } from "react";

function App() {
  const [selectedColor, setSelectedColor] = useState("");

  const handleClick = (color) => {
    setSelectedColor(color);
  };

  return (
    <div>
      <h1>Select a color</h1>
      <div>
        <button onClick={() => handleClick("Red")}>Red</button>
        <button onClick={() => handleClick("Blue")}>Blue</button>
        <button onClick={() => handleClick("Green")}>Green</button>
        <button onClick={() => handleClick("Yellow")}>Yellow</button>
      </div>
      <p>You have selected the color {selectedColor}.</p>
    </div>
  );
}

export default App;