Preview:
import React, { useState } from 'react';

const UserSelect = () => {
  const [selectedOption, setSelectedOption] = useState(""); // Initialize selectedOption state

  const handleChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedOption(selectedValue); // Update selectedOption state

    // Redirect to appropriate login page based on selected option
    switch(selectedValue) {
      case "admin":
        window.location.href = "/admin-login"; // Replace with the actual URL of your admin login page
        break;
      case "sales-manager":
        window.location.href = "/log-manager"; // Replace with the actual URL of your sales manager login page
        break;
      case "merchants":
        window.location.href = "/log-merchant"; // Replace with the actual URL of your merchant login page
        break;
      default:
        // Code for default option
        break;
    }
  }

  return (
    <div>
      <label htmlFor="users">Users:</label>
      <select name="user" id="users" placeholder="select user" onChange={handleChange}>
        <option value="">Select User</option>
        <option value="admin">Admin</option>
        <option value="sales-manager">Sales Manager</option>
        <option value="merchants">Merchants</option>
      </select>
    </div>
  );
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter