Hide and Show dropDown on checkbox check/uncheck - reactjs

Question

I have an issue, I need to show and hide DropDown/Selects field based on Checkbox's state. Means when checkbox state is checked I need to show Dropdown and when I uncheck it should hide. I have attached a code of this component below. As you can see I have 3 Dropdowns created already, but I need to hide/show them by checking/unchecking one single checkbox
import React, { useState, useEffect } from "react";
import { Button } from "../../components/Button";
import { Checkbox } from "../../components/Checkbox";
import { FormBuilder } from "../../components/FormBuilder";
import { Grid, GridCell, GridRow } from "../../components/Grid";
import { LinearProgress } from "../../components/LinearProgress";
import { Select } from "../../components/Select";
import { TextField } from "../../components/TextField";
import { Name } from "../../models/Name";
import { Option } from "../../models/Option";
import { DynamicForm } from "../../models/DynamicForm";
import "./index.css";
import { Organization } from "../../models/Organization";
import { request } from "../../api";
import { serialize } from "class-transformer";
import { CodingTemplate } from "../../models/CodingTemplate";
import { useHistory } from "react-router-dom";
import { useRef } from "react";
const NUMBER_OF_STEPS = 3;
const screen = {
first: 1,
second: 2,
third: 3,
};
const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
const check1 = useRef();
return (
<div>
<h4 style={{ margin: 16 }}>Данные формы</h4>
<Grid>
<GridRow>
<GridCell span={5}>
<Checkbox
label="CHECKBOX"
onChange={(value) => (dynamicForm.needExtraApprove = value)}
defaultChecked={dynamicForm.needExtraApprove}
/>
</GridCell>
</GridRow>
<GridRow>
<GridCell span={4}>
<Select<Option>
required
//defaultValue={dynamicForm.departmentHash}
label="Select to show/hide"
type={Option}
//api="/state_schedule/departments-with-journals/"
defaultOptions={defaultOptions}
//onChange={(value: Option) => dynamicForm.departmentHash = value}
/>
}
</GridCell>
<GridCell span={4}>
<Select<Option>
required
//defaultValue={dynamicForm.departmentHash}
label="Select to show/hide"
type={Option}
//api="/state_schedule/departments-with-journals/"
defaultOptions={defaultOptions}
//onChange={(value: Option) => dynamicForm.departmentHash = value}
/>
</GridCell>
<GridCell span={4}>
<Select<Option>
required
//defaultValue={dynamicForm.departmentHash}
label="Select to show/hide"
type={Option}
//api="/state_schedule/departments-with-journals/"
defaultOptions={defaultOptions}
//onChange={(value: Option) => dynamicForm.departmentHash = value}
/>
</GridCell>
</GridRow>
</Grid>
</div>
);
};
const FormFields = ({ dynamicForm }: { dynamicForm: DynamicForm }) => (
<div>
<h4 style={{ margin: 16 }}>ASD</h4>
<FormBuilder dynamicForm={dynamicForm} />
</div>
);
export default () => {
const [step, setStep] = useState(1);
const [dynamicForm, setDynamicForm] = useState<DynamicForm>(
new DynamicForm()
);
let progress = parseFloat(((step - 1) * (1 / NUMBER_OF_STEPS)).toFixed(2));
const onBackButtonPress = () => {
if (step > 0) {
setStep((prev) => prev - 1);
}
};
const onNextButtonPress = () => {
event.preventDefault();
if (step < screen.third) {
setStep((prev) => prev + 1);
} else {
console.log("submit!");
//submit
}
// if (step < screen.third) {
// setStep((prev) => prev + 1);
// } else {
// console.log("submit!");
// //submit
// }
};
const history = useHistory();
const onSubmitTest = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
console.log(dynamicForm);
await request("/service-desk/forms/", {
method: "POST",
body: serialize(dynamicForm),
});
history.push({
pathname: "/service-desk/application-form",
});
} catch (error) {
console.log(error);
alert("ERROR");
}
};
let content = <SubDivision dynamicForm={dynamicForm} />;
let nextBtnLabel = "NEXT";
if (step === screen.second) {
content = <FormDetails dynamicForm={dynamicForm} />;
} else if (step === screen.third) {
content = <FormFields dynamicForm={dynamicForm} />;
}
return (
<form onSubmit={onSubmitTest} noValidate={step === screen.third}>
<LinearProgress progress={progress} determinate />
{content}
<div className="request-btn-container">
<Button
label="BACK"
disabled={step == 1}
onClick={onBackButtonPress}
/>
{step === 3 ? (
<Button label="SAVE" raised type="submit" />
) : (
<Button
label="NEXT"
disabled={step == 3}
onClick={onNextButtonPress}
/>
)}
</div>
</form>
);
};
. Thank you for any tip or advice!

Answer 1

Let me know if this helps.
const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
const check1 = useRef();
return (
<div>
<h4 style={{ margin: 16 }}>Данные формы</h4>
<Grid>
<GridRow>
<GridCell span={5}>
<Checkbox
label="CHECKBOX"
onChange={(value) => (dynamicForm.needExtraApprove = value)}
defaultChecked={dynamicForm.needExtraApprove}
/>
</GridCell>
</GridRow>
{dynamicForm.needExtraApprove ? (
<GridRow>
<GridCell span={4}>
// put your select here
</GridCell>
<GridCell span={4}>
// put your select here
</GridCell>
<GridCell span={4}>
// put your select here
</GridCell>
</GridRow>
): null}
</Grid>
</div>
);
};