Spaces:
Sleeping
Sleeping
import React, { useState } from 'react'; | |
interface DropdownProps { | |
options: React.RefObject<string[]>; | |
selectedOption: React.RefObject<string>; | |
} | |
export default function Dropdown({ options, selectedOption }: DropdownProps) { | |
const [value, setValue] = useState<string>(''); | |
const [newValue, setNewValue] = useState<string>(''); | |
const handleAddItem = () => { | |
options.current?.push(newValue); | |
selectedOption.current = newValue; | |
setNewValue(''); | |
}; | |
const handleSelectItem = (event: React.ChangeEvent<HTMLSelectElement>) => { | |
selectedOption.current = event.target.value; | |
setValue(event.target.value); | |
}; | |
return ( | |
<div> | |
<select | |
value={value} | |
onChange={(event) => handleSelectItem(event)} | |
style={{ color: 'black' }} | |
> | |
{options.current?.map((option: string, index: number) => ( | |
<option | |
value={option} | |
key={index} | |
style={{ color: 'black' }} | |
> | |
{option} | |
</option> | |
))} | |
</select> | |
<br /> | |
<br /> | |
<input | |
type="text" | |
style={{ color: 'black' }} | |
value={newValue} | |
onChange={(e) => setNewValue(e.target.value)} | |
/> | |
<br /> | |
<br /> | |
<button className="bg-gray-400 hover:bg-blue-700 text-white font-bold py-1 px-1" | |
onClick={handleAddItem}>Add</button> | |
</div> | |
); | |
}; | |