Question 44203 in Html Question posted in
Some basic documentation can be found here.

How to create a dropdown menu using react js is this is a right to set a value after this how to approach this – Html

const [selectedDepartment, setSelectedDepartment] = useState("");

  const DepartmentDropdown = () => {
    const handleSelectChange = (event) => {
      setSelectedDepartment(event.target.value);
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      console.log(email);
    };
      return(
          <div>
            <label htmlFor="departments">Select a Department:</label>
            <select
              id="departments"
              value={selectedDepartment}
              onChange={handleSelectChange}
            >
              <option value="">--Select a Department--</option>
              <option value="ai&ds">AI&DS</option>
              <option value="cse">CSE</option>
              <option value="ece">ECE</option>
              <option value="eee">EEE</option>
              <option value="it">IT</option>
              <option value="mech">MECH</option>
            </select>
            {selectedDepartment && <p>You selected: {selectedDepartment}</p>}
          </div>)

}

Here, I have a doubt where would I use call the function DepartmentDropdown. How to access this dropdown menu. Is there any other easiest way to implement this.

Tags:

2

Answers


  1. 0

    With React function components, you use the name of the function as the component name in JSX, like this:

    <DepartmentDropdown />

    It looks weird because it’s a function being used as an element name, but that’s how JSX works.

    Login or Signup to reply.
  2. 0

    don’t create the state inside your DepartmentDropdown component but make it in the parent component from which you will call DepartmentDropdown

    const DepartmentDropdown = ({handleSelectChange,selectedDepartment}) => {

    return (
      <div>
        <label htmlFor="departments">Select a Department:</label>
        <select
          id="departments"
          value={selectedDepartment}
          onChange={(event) => {
            handleSelectChange(event.target.value)
         }}
        >
          <option value="">--Select a Department--</option>
          <option value="ai&ds">AI&DS</option>
          <option value="cse">CSE</option>
          <option value="ece">ECE</option>
          <option value="eee">EEE</option>
          <option value="it">IT</option>
          <option value="mech">MECH</option>
        </select>
        {selectedDepartment && <p>You selected: {selectedDepartment}</p>}
      </div>
    );
 
};

    as it is shown in the code

    DepartmentDropdown = ({handleSelectChange,selectedDepartment}) =>

    handleSelectChange and selectedDepartment will be passed as props to the DepartmentDropdown component

    Now in your parent component you create selectedDepartment then pass it to DepartmentDropdown to make it able to show it
    and create handleSelectChange then pass it to DepartmentDropdown to make it able to update selectedDepartment state in the parent component:

    const Parent = () => {
  
    const [selectedDepartment, setSelectedDepartment] = useState("");
    const handleSelectChange = (value) => {
        setSelectedDepartment(value);
      };
     //...
      return (
        <>
         //... 
        <DepartmentDropdown handleSelectChange={handleSelectChange} selectedDepartment={selectedDepartment} />
         //... 
        </>
      )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search