Materialize 'Select' Component Not Working In React

As stated in the question, I'm trying to use the Select component in MaterializeCSS/React and the webpage rendering looks like this: The text is greyed out and I can't click or int

Solution 1:

You shouldn't be using jQuery with React. React uses a virual DOM to make UIs and jQuery uses the normal browser DOM. This means that if you start using jQuery to handle state, React is no longer handling state, events, and UI rendering. (https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk). MaterializeCSS uses jQuery to interact with many (if not all) of their components.

Also, in your render function, react uses camelCasing on all DOM properties and attributes, including event handlers. You will need to use className instead of class to correctly use a css class.