material-tailwind Select Options

Question

I am using the @material-tailwind/react in Next.JS application. I took the following code from the example here: https://www.material-tailwind.com/docs/react/select. In React I could use the onChange function over the Select and then get the value of the selected item e.g. "e.target.value". How does it work with this component?

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Select label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Answer 1

It took me nearly 3 hours just to solve this simple solution...hopefully, someone who might need this answer could find it...GD bless

<Select label="Select Bible" id="bible_type" className="text-white text-xs" selected={(element) =>
   {
    if (element) {
      const selectedValue = element.props.value;
      console.log('Selected Value:', selectedValue);
    return element.props.name;
    }

  }
    }>
       {this.state.options.map((option) => (
            <Option   key={option.id} value={option.value} data-id={option.id} name={option.label}>
              {option.label}
            </Option>
          ))}
      </Select>

Answer 2

Instead of using e.target.value just use e. For some reason it seems to work

import React,{useState} from "react"
import { Select, Option } from "@material-tailwind/react";

 export default function Example() {
    const [temp,setTemp] = useState();
    const handleChange=(e)=>{
    setTemp(e);
 }
  return (
    <div className="w-72">
      <Select onChange={handleChange} label="Select Version" >
        <Option value="A">Material Tailwind HTML</Option>
        <Option value="B">Material Tailwind React</Option>
        <Option value="C">Material Tailwind Vue</Option>
        <Option value="D">Material Tailwind Angular</Option>
        <Option value="E">Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}