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> ); }
Preview:
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