I created this form Component to generate a dynamic react page, the options are selected via the radio button. After selecting the option that option should drop to the related bucket.
On the current instance I'm being able to select all indicated radio buttons where I want to make this to be able to select only one radio buttons on two places out of all generated.
import React, { useState } from "react";
import { Row, Col, Divider, Button, Radio } from "antd";
import { Hicon, uuid } from "utils/imports";
import styles from "./FormsToBeMaintained.module.css";
const FormsToBeMaintained = props => {
const plainOptions = [
{
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
];
const NewFormsIdentified = [
{
id: 1,
tittle: "W-4",
"Regulatory Forms": true,
"Employer Specific Forms": false,
options: [
{
labelId: 3,
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
labelId: 4,
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
]
},
{
id: 2,
tittle: "State new hire tax forms",
"Regulatory Forms": true,
"Employer Specific Forms": false,
options: [
{
labelId: 5,
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
labelId: 6,
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
]
},
{
id: 3,
tittle: "Offer letter",
"Regulatory Forms": true,
"Employer Specific Forms": false,
options: [
{
labelId: 7,
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
labelId: 8,
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
]
},
{
id: 4,
tittle: "Employment agreement",
"Regulatory Forms": true,
"Employer Specific Forms": false,
options: [
{
labelId: 9,
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
labelId: 10,
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
]
},
{
id: 5,
tittle: "Emergency contact information",
"Regulatory Forms": true,
"Employer Specific Forms": false,
options: [
{
labelId: 11,
label: "Regulatory Forms",
value: "Regulatory Forms"
},
{
labelId: 12,
label: "Employer Specific Forms",
value: "Employer Specific Forms"
}
]
}
];
const [radioChecked, isRadioChecked] = useState(false);
const [value1, setValue1] = useState([]);
const [edit1, setEdit1] = useState(false);
const [regulatoryData, setRegulatoryData] = useState([]);
const [list, updatelist] = useState([]);
const onChange1 = event => {
// console.log("checked", event);
setValue1([
...value1,
{ name: event.target.name.tittle, value: event.target.value }
]);
isRadioChecked(true);
};
console.log(value1);
const onSubmit = () => {
setRegulatoryData([...value1]);
console.log(regulatoryData);
removeHandler(...value1);
console.log(list);
};
// const removeFormFields = i => {
// const newFormValues = [...value1];
// newFormValues.splice(i, 1);
// delValue(newFormValues);
// console.log(newFormValues);
// };
const removeHandler = e => {
const x1 = e.target.getAttribute(NewFormsIdentified);
updatelist(list.filter(items => items.title !== x1));
console.log(list);
};
return (
<>
<Row>
<Col span={12} className={`${styles.outerBor} `}>
<Row>
<Col
span={24}
className={`text-size-18 ${styles.title} ${styles.section}`}
>
Regulated Forms
</Col>
<Divider />
</Row>
<Row className={` ${styles.scroll_content}`}>
{regulatoryData &&
regulatoryData.map(form => {
if (form.value === "Regulatory Forms") {
return (
<>
<Col span={24} className={styles.content} key={form.id}>
{edit1 ? (
<>
<Row>
<Col span={18}>
<b>{form.name}</b>
</Col>
<Col span={6} className="align-right">
<Hicon
icon="Cancel"
onClick={() => setEdit1(false)}
value={edit1}
className="text-size-24"
/>
<Hicon
icon="SaveIconWithoutBackground"
className="text-size-24"
/>
</Col>
</Row>
<Row key={form.id}>
<Col span={24} className={` ${styles.content}`}>
<Radio.Group
key={uuid()}
options={plainOptions}
// options={form.value}
// onChange={(event, options) =>
// onChange1({
// target: {
// name: form,
// value: event.target.value
// }
// })
// }
// onChange={onChange1}
// value={form[value1]}
value={value1}
className={` ${styles.radioContent} text-bold `}
/>
</Col>
</Row>
</>
) : (
<Row>
<Col span={20}>
<b>{form.name}</b>
</Col>
<Col span={4} className="align-right">
<Hicon
icon="Pencil"
className="text-size-24"
onClick={() => setEdit1(true)}
value={edit1}
/>
</Col>
</Row>
)}
</Col>
<Divider />
</>
);
}
return null;
// return (
// <Col span={24} className={styles.content}>
// <b>No Forms included</b>
// </Col>
// );
})}
</Row>
</Col>
<Col span={12} className={`${styles.outerBor} `}>
<Row>
<Col
span={24}
className={`text-size-18 ${styles.title} ${styles.section}`}
>
Employer Specific Forms
</Col>
<Divider />
</Row>
<Row className={` ${styles.scroll_content}`}>
{regulatoryData &&
regulatoryData.map(form => {
if (form.value === "Employer Specific Forms") {
return (
<>
<Col span={24} className={styles.content} key={form.id}>
{edit1 ? (
<>
<Row>
<Col span={18}>
<b>{form.name}</b>
</Col>
<Col span={6} className="align-right">
<Hicon
icon="Cancel"
onClick={() => setEdit1(false)}
// value={edit1}
className="text-size-24"
/>
<Hicon
icon="SaveIconWithoutBackground"
className="text-size-24"
/>
</Col>
</Row>
<Row key={form.id}>
<Col span={24} className={` ${styles.content}`}>
<Radio.Group
key={uuid()}
options={plainOptions}
// options={form.value}
// onChange={(event, options) =>
// onChange1({
// target: {
// name: form,
// value: event.target.value
// }
// })
// }
onChange={onChange1}
// value={form[value1]}
value={value1}
className={` ${styles.radioContent} text-bold `}
/>
</Col>
</Row>
</>
) : (
<Row>
<Col span={20}>
<b>{form.name}</b>
</Col>
<Col span={4} className="align-right">
<Hicon
icon="Pencil"
className="text-size-24"
onClick={() => setEdit1(edit1 ? 0 : 1)}
// value={form.value}
/>
</Col>
</Row>
)}
</Col>
<Divider />
</>
);
}
return null;
// return (
// <Col span={24} className={styles.content}>
// <b>No Forms included</b>
// </Col>
// );
})}
</Row>
</Col>
</Row>
<Row>
<Col span={24} className={styles.outerBor}>
<Row>
<Col
span={10}
className={`text-size-18 text-bold ${styles.title} ${styles.section}`}
>
New Forms Identified
</Col>
<Col
span={8}
className={`text-size-18 text-bold ${styles.title} ${styles.section}`}
>
Move To
</Col>
<Col
span={6}
className={`text-size-18 ${styles.title} ${styles.section}`}
>
{radioChecked ? (
<div className="align-right">
<Button
onClick={() => isRadioChecked(radioChecked ? 0 : "")}
type="text"
className="text-size-14"
>
Cancel
</Button>
<Button
className={` border-radius-5 background_144182 text-size-14`}
type="primary"
htmlType="submit"
onClick={onSubmit}
>
<Hicon
icon="SaveIconWithoutBackground"
className="text-size-16"
>
<span className="text-size-14">Save</span>
</Hicon>
</Button>
</div>
) : (
<Button
className={` border-radius-5 background_144182 text-size-14 align-right`}
type="primary"
htmlType="submit"
disabled
>
<Hicon
icon="SaveIconWithoutBackground"
className="text-size-16"
>
<span className="text-size-14">Save</span>
</Hicon>
</Button>
)}
</Col>
</Row>
<Divider />
{/* {console.log(NewFormsIdentified, value1)} */}
<Row className={` ${styles.scroll_content}`}>
{NewFormsIdentified &&
NewFormsIdentified.map(form => {
// {
// console.log(form[value1]);
// }
return (
<>
<Col span={10} className={styles.content}>
<ul className="color_144182 text-bold">{form.tittle} </ul>
</Col>
<Col span={14} className={` ${styles.content}`}>
<Radio.Group
key={uuid()}
// options={plainOptions}
// options={form.options}
onChange={(event, options) =>
onChange1({
target: {
id: event.target.id,
name: form,
value: event.target.value
}
})
}
// onChange={onChange1}
// value={form[value1]}
value={value1.map(radioData => {
form.options.map(
formDa =>
radioData.value === formDa.value &&
radioData.value
);
})}
checked={value1.filter(radioData => {
return radioData.name === form.tittle;
})}
className={` ${styles.radioContent} text-bold `}
radioChecked={1}
>
{form.options.map(opt => {
// console.log(opt.label);
return (
<>
<Radio value={opt.value}>{opt.value}</Radio>
</>
);
})}
</Radio.Group>
</Col>
<Divider />
</>
);
})}
</Row>
</Col>
</Row>
</>
);
};
export default FormsToBeMaintained;