CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Refael
Refael

Reputation: 187

material-tailwind Select Options

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

Upvotes: 4

Views: 9341

Answers (4)

Karthik Kulal
Karthik Kulal

Reputation: 1

just add values for options it will work

<Select label="Title" value={adultsDeatils.title} className="py-3" onChange={(event) => {handleChange("title",event)}}>
                        <Option value="Mr">Mr</Option>
                        <Option value="Mrs">Mrs</Option>
                        <Option value="Ms">Ms</Option>
                    </Select>

 const handleChange = (data, id) => {
    console.log("data", data, id);
    setAdultsDetails({
        ...adultsDeatils,
        [id]: data
    })

}

Upvotes: 0

Roza
Roza

Reputation: 81

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>

Upvotes: 7

SasalMarcon Arengh
SasalMarcon Arengh

Reputation: 51

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

Upvotes: 5

Refael
Refael

Reputation: 187

The only was I could resolve this is as below, which is a bit different than how you would do this with React.

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

export default function Home() {
  const [value, setValue] = useState(null);

  const handleChange = (value) => {
    console.log('value:', value);
  };

  return (
   <div className='w-72'>
       <Select label='Select Version' value={value} onChange={handleChange}>
          <Option value='123'>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>
  );
}

Upvotes: 2

Related Questions