I want to make react checkbox mandatory - node.js

Question

I want to make it necessary to mark the React js checkbox component. I want to show warning icon when Checkbox is not selected. How can I do that? I shared the component I wrote below.
React checkbox component
const CheckBox = ({
question,
formKey,
valid = true,
validationError = 'Field is required',
}) => {
const dispatch = useDispatch()
const reduxValue = useSelector(state => state.app.forms.f3[formKey].value)
const isSaved = useSelector(state => state.app.forms.f3[formKey].saved)
const [input, setInput] = useState({
value: reduxValue,
valid: true,
})
return (
<>
<Row>
<Col className="col-1">
<label className="orange-checkbox-container">
<input
type="checkbox"
name={formKey}
onChange={(e) => changeSelected(e)}
checked={input.value}
/>
<span className="checkmark"></span>
</label>
</Col>
<Col className="col-11">
<p>{question}</p>
</Col>
</Row>
<div
className="invalid-feedback"
style={{
width: '8rem',
}}
>
{validationError}
</div>
</>
);
}

Answer 1

I will improve on Han's answer. You should hide the whole div if there the checkbox was selected. I improved how the onChange works and separated states. Using hooks you can separate your state values rather than the approach used in classes where you have 1 object this.state = {} to manage the whole state of that component.
const CheckBox = ({
question,
formKey,
// valid = true,
validationError = 'Field is required',
}) => {
const dispatch = useDispatch();
const reduxValue = useSelector(state => state.app.forms.f3[formKey].value);
const isSaved = useSelector(state => state.app.forms.f3[formKey].saved);
const [checked, setChecked] = useState(reduxValue);
const [valid, setValid] = useState(true);
const handleCheckedChange = event => {
setChecked(event.target.checked);
}
return (
<>
<Row>
<Col className="col-1">
<label className="orange-checkbox-container">
<input
type="checkbox"
name={formKey}
onChange={handleCheckedChange}
checked={checked}
/>
<span className="checkmark"></span>
</label>
</Col>
<Col className="col-11">
<p>{question}</p>
</Col>
</Row>
{!checked &&
<div
className="invalid-feedback"
style={{
width: '8rem',
}}
>
{validationError}
</div>
}
</>
);
}

Answer 2

First you should declare the initial state of valid to false and display validationError if input.value is false I assume your onChange is changing the input.value.
const [input, setInput] = useState({
value: reduxValue,
valid: false,
})
<div
className='invalid-feedback'
style={{
width: '8rem',
}}
>
{!input.value && validationError}
</div>