validation for react-select, getting Cannot read property 'length' of undefined - reactjs

Question

I am new to react and am using react-select for selecting the respective departments. I am trying to validate the select dropdown such that if select dropdown is empty it will give an error message. I am not sure how to do that exactly. It is showing this error:
Departments.continue
D:/react_bpms1/src/components/Departments.js:69
66 | this.setState({ selectedOptions });
67 | };
68 | continue = e => {
> 69 | if (document.getElementById("Departments").value.length < 1) {
| ^ 70 | document.getElementById("departments").style.visibility = "visible";
71 | document.getElementById("Departments").style.border = "1px solid red";
72 | } else {
But here is what I am doing:
const Departments = [
{ label: "OneIT", value: "OneIT" },
{ label: "HR", value: "HR" },
{ label: "Vigilance", value: "Vigilance" },
{ label: "Ethics", value: "Ethics" },
{ label: "Corporate Services", value: "Corporate Services" },
{ label: "Legal", value: "Legal" },
{ label: "Sports", value: "Sports" },
{ label: "TQM", value: "TQM" },
{ label: "Iron Making", value: "Iron Making" },
{ label: "TMH", value: "TMH" }
];
class MultiSelect2 extends Component {
state = {
selectedOptions: []
};
handleChangeField = selectedOptions => {
this.setState({ selectedOptions });
};
render() {
const { selectedOption } = this.state;
return (
<div className="container">
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-8">
<span>Select Department</span>
<Select
id="Departments"
htmlFor="Departments"
value={selectedOption}
options={Departments}
onChange={this.handleChangeField}
isMulti
/>
{this.state.selectedOptions.map(o => (
<p>{o.value}</p>
))}
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
export default MultiSelect2;
Here is where I am calling the Multiselect option:
export class Departments extends Component {
state = {
rows: [],
idx: [],
selectedOptions: []
};
handleChangeField = selectedOptions => {
this.setState({ selectedOptions });
};
continue = e => {
if (document.getElementById("Departments").value.length < 1) {
document.getElementById("departments").style.visibility = "visible";
document.getElementById("Departments").style.border = "1px solid red";
} else {
e.preventDefault();
this.props.nextStep();
}
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
const { values, handleChange } = this.props;
const { selectedOption } = this.state;
const {
values: {
Title,
Details,
What,
Why,
How,
Status,
Cost,
Benefits,
Kpi_Before,
Kpi_After,
UOM_Before,
UOM_After,
Base_After,
Target_After,
dateTime_After,
Base_Before,
Target_Before,
Time,
dateTime,
departments,
Departments,
selectedOptions
}
} = this.props;
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<div className={useStyles.root}>
<AppBar position="static">
<Toolbar>
<Typography
gutterBottom
align="center"
style={{ width: "100%", alignItems: "center" }}
>
Select Departments
</Typography>
</Toolbar>
</AppBar>
</div>
<br />
<br />
<Grid container>
<Grid item xs={6}>
<MultiSelect2
style={{ width: "80%" }}
id="Departments"
onChange={this.handleChangeField}
value={selectedOption}
/>
<label
id="departments"
style={{ visibility: "hidden", color: "red" }}
>
Select Applicable departments
</label>
</Grid>

Answer 1

As #sandeeppradhan you have to stop using these accessors, and think DATA driven ie change the states / props and display them through your interface, dont change styles as you are doing because the dom may change at anytime. And this is a source of bug as the component may not be attached to the dom or a child component may not be ready. Tbh, you are a bit too far in the wrong to make minor update to your code to fix the isssue
To answer more specifically to your question : probably the MultiSelect2 is not rendered when the event occurs.
Bad solution but may interest you : merge the MultiSelect2 inside Departments and use ref + state
ex : 
export class Departments extends Component {
constructor(props) {
super(props);
this.state={
departmentsStyle:{}
};
this.departmentsRef = React.createRef();
}
//...
continue = e => {
if (this.departmentsRef.current && this.departmentsRef.current.value.length < 1) {
this.setState({
departmentsStyle:{
border:"1px solid red",
visibility : "visible"
}
});
} else {
this.setState({
departmentsStyle:{}
});
e.preventDefault();
this.props.nextStep();
}
};
//.... ETC ETC
render() {
//...
return (
///...
//The ref is forwarded to the root element
//(if it does not work use inputRef={departmentsRef})
<Select ref={departmentsRef} style={this.state.departmentsStyle}
//...
)
}
Best solution I think : At this point the only think I would advice is if possible to look at Formik and transfer the FormikBag to the MultiSelect2. You could then manage better the components with the state of the form.
https://jaredpalmer.com/formik/docs/overview
good luck, all the best