What could cause html select element not to render on the browser? - reactjs

Question

I have a form in my react project with few input tags
and select tags. On the browser the inputs are rendering
but the select tags are not rendering. I am using materialize css
for the styling. I inspect the elements, the select element is showing
on the elements inspection pane and there is no console error about it.
What could be the problem and the possible
solution? The codes is as show below with screen shots.
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import M from 'materialize-css/dist/js/materialize'
function Register() {
const initialState = {
pin: '',
serial_num: '',
last_name: '',
first_name: '',
date: '',
gender: 'male',
school: '',
class: '',
photo: ''
}
const photoRef = useRef();
const dispatch = useDispatch();
useEffect(() => {
const elems = document.querySelectorAll('.datepicker');
M.Datepicker.init(elems, {
autoClose: true
});
}, []);
const [regState, setRegState] = useState(initialState)
const onChange = e => {
setRegState({ ...regState, [e.target.name]: e.target.value });
}
const onSubmit = e => {
// dispatch();
setRegState({...regState,
photo: photoRef.current.files[0].name
})
console.log(regState)
console.log(photoRef.current.files[0].name);
setRegState({ ...initialState });
e.preventDefault();
}
return (
<div className="row">
<form method='POST'
onSubmit={onSubmit}
className="col s12"
encType="multipart/form-data"
>
<div className="input-field col s12">
<input id="serial_num" type="text"
className="validate" name="serial_num"
min="13" max="17" onChange={onChange} required
value={regState.serial_num}
/>
<label htmlFor="serial_num">Serial Number</label>
</div>
<div className="input-field col s12">
<input id="pin" type="password"
className="validate" name="pin"
min="10" max="15" onChange={onChange} required
value={regState.pin}
/>
<label htmlFor="pin">Pin</label>
</div>
<div className="input-field col s12">
<input id="last_name" type="text"
className="validate" name="last_name"
onChange={onChange} required
value={regState.last_name}
/>
<label htmlFor="last_name">Last Name</label>
</div>
<div className="input-field col s12">
<input id="first_name" type="text"
className="validate" name="first_name"
onChange={onChange} required
value={regState.first_name}
/>
<label htmlFor="first_name">First Name</label>
</div>
<div className="input-field col s12">
<input id="date" type="text"
className="validate datepicker" name="date"
onChange={onChange} required
value={regState.date}
/>
<label htmlFor="date">Date of Birth</label>
</div>
<div className="input-field col s12">
<label>
<input name="gender" type="radio" checked value='male' onChange={onChange} />
<span>Male</span>
</label>
</div>
<div className="input-field col s12">
<label>
<input name="gender" type="radio" value='female' onChange={onChange} />
<span>Female</span>
</label>
</div>
<div className="input-field col s12">
<select name='school' id="school" value={regState.school} onChange={onChange} >
<option value="" >Select School</option>
<option value="nursery" >Nursery School</option>
<option value="primary" >Primary School</option>
<option value="secondary" >Secondary School</option>
</select>
<label htmlFor="school">Select School</label>
</div>
<div className="input-field col s12">
<select name='class' id="class" value={regState.class} onChange={onChange} >
<option value="" >Select Class</option>
</select>
<label htmlFor="class">Select Class</label>
</div>
<div className="input-field col s12">
<input id="photo" type="file"
className="validate" name="photo"
ref={photoRef}
/>
<label htmlFor="photo">Photo</label>
</div>
<button className="btn waves-effect waves-light" type="submit" name="action">Submit
<i className="material-icons right">send</i>
</button>
</form>
</div>
)
}

Answer 1

Select needs to be initialized - after it's been added to the DOM, and every subsequent time it is rendered:
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
FYI, Materialize hides the native select (display:none) and only generates the new select (actually a dropdown triggered by a text input) when the init runs. You can also use .browser-default on the select and bypass the init and the materialize styling.