Materialize 'Select' component not working in React

Question

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 interact with it. This is my relevant code:

I have included:

import ReactDOM from 'react-dom';
import $ from 'jquery'; 

My componentDidMount() method looks like this:

componentDidMount() {
  var element = ReactDOM.findDOMNode(this.refs.dropdown)
  $(element).ready(function() {
    $('select').material_select();
  });
}

And in my render() function I have the sample code from the Materialize Website :

<div class="input-field offset-s3 col s1">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

What am I doing wrong here? I followed the advice given here but it doesn't seem to be working:

How do I get the Materialize select dropdown to work with React?

I've scoured around but can't seem to find other threads with people describing the same behavior.

Answer 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.