'React Materiał-UI Autocomplete how to type in one TextField
When typing, it types in every TextField
, I don't know how to use event to type in only one, active TextField. I'm mapping over an array of Objects and rendering TextField
with Autocomplete
. Thanks for your time :)
export const options = [
{ id: 1, label: "Chocolate", value: "chocolate", amount: "2 kostki" },
{ id: 2, label: "Strawberry", value: "strawberry", amount: "1kg" },
{ id: 3, label: "Vanilla", value: "vanilla", amount: "laska" },
{ id: 4, label: "Dorsz filet", value: "dorsz filet", amount: "200g" },
{ id: 5, label: "Ziemniaki", value: "ziemniaki", amount: "500g" },
{
id: 6,
label: "Oliwa z oliwek",
value: "oliwa z oliwek",
amount: "2 łyżki",
},
{ id: 7, label: "Panga", value: "panga", amount: "opakowanie" },
{ id: 8, label: "Pieprz", value: "pieprz", amount: "2 szczypty" },
{ id: 9, label: "Sól", value: "sól", amount: "łyżeczka" },
];
const [inputValue, setInputValue] = useState("");
const onInputChange = (event: ChangeEvent<{}>, newValue: string) => {
setInputValue(newValue);
};
{options.map((item) => (
<div
key={item.id}
className="bg-yellow rounded-md mb-6 flex align-content-bottom justify-between"
>
<>
<Autocomplete
className="w-2/3"
options={options}
getOptionLabel={(option: Option) => option.label}
freeSolo
inputValue={inputValue}
onInputChange={onInputChange}
renderInput={(params) => (
<TextField
className="p-2 w-full"
{...params}
label={item.label}
{...register(`ingredient${item.id}`)}
/>
)}
/>
<TextField
className="w-1/4 p-2"
label={item.amount}
{...register(`ingredient-amount${item.id}`)}
/>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|