0

As stated in the question, I'm trying to use the Select component in MaterializeCSS/React and the webpage rendering looks like this:failing materialize select

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.

edkeveked
  • 17,989
  • 10
  • 55
  • 93
Ritwik Biswas
  • 1,329
  • 1
  • 13
  • 18

1 Answers1

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.

John
  • 705
  • 3
  • 9
  • 18
  • So you're saying React and Materialize is not a good combination to use in general? – Ritwik Biswas Dec 28 '17 at 18:54
  • @RitwikBiswas yes. You could probably use the css from materialize and make your own logic in React, but that would be kind of hackey. I'd try and find a React-specific component library to use. – John Dec 28 '17 at 19:04