I have input boxes which are getting enabled when the checkbox of that input box get checked by user. then I want to type in that particular input box, but when I am in a particular input box then my text is showing in the all the input.
import React, { useState } from "react";
//some imports related to checkbox
export default function Rename() {
//input
const [value, setValue] = useState("");
//checkbox group
const [checkedOptions, setCheckedOptions] = useState({});
const onOSelect = (event) => {
const item = event.target.name;
const isChecked = event.target.checked;
setCheckedOptions({
...checkedOptions,
[item]: isChecked,
});
};
//data
const data = [
{ label: "Email", name: "email" },
{ label: "Phone", name: "phone" },
{ label: "Mail", name: "mail" },
{ label: "test", name: "test" },
];
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<div className="rename-tab-container">
<div className="checkbox-wrapper">
<MediaCard className="checkbox-card">
<CheckboxGroup
checkedOptions={checkedOptions}
groupLabel="Checkbox group label"
onChange={onOSelect}
options={data}
/>
</MediaCard>
</div>
<MediaCard className="input-card">
<div className="input-container">
{data.map((item, key) => (
<div key={key.name} className="rename-wrapper">
<Input
isRequired
label={item.name}
minLength={4}
name={item.name}
onChange={handleChange}
onError={handleError}
placeholder="Placeholder"
isDisabled={!checkedOptions[item.name]}
inputClassName="rename-input-box"
value={value}
/>
</div>
))}
</div>
</MediaCard>
</div>
);
}
Looking for a solution, how display my typed text only in the related input field and get that value in particular state.
Aucun commentaire:
Enregistrer un commentaire