Hackforge Academy

Explanation

Import React hooks. useState stores dropdown values and useEffect fetches data from the API when the component loads .

Code:

import React, { useEffect, useState } 
from "react";

Explanation

Create component and initialize state. This state will store dropdown options received from the API .

Code:

function UserDropdown() {
  const [users, setUsers] = useState([]);

Explanation

Fetch dropdown data from API using useEffect. After fetching, store the response inside the users state .

Code:

useEffect(() => {
  fetch("https://www.apirequest.in")
    .then((res) => res.json())
    .then((data) => setUsers(data));
}, []);

Explanation

Use map() to populate dropdown options dynamically from API data. Each option represents one user .

Code:

return (
  <select>
    <option value="">Select User</option>
    {users.map((user) => (
      <option key={user.id} value={user.id}>
        {user.name}
      </option>
    ))}
  </select>
);

Explanation

Export the component so it can be reused anywhere in your React application. This completes dynamic dropdown population from API .

Code:

export default UserDropdown;