Cannot get the Selected Value from Materialize dropdown with React JS

Question

I have this Materialize DropDown

      <ul id="dropdown1" className="dropdown-content">
        <li>
          <a href="#!">
            one
          </a>
        </li>
        <li>
          <a href="#!">two</a>
        </li>
        <li className="divider" tabIndex="-1"></li>
        <li>
          <a href="#!">three</a>
        </li>
        <li>
          <a href="#!">
            <i className="material-icons">view_module</i>four
          </a>
        </li>
        <li>
          <a href="#!">
            <i className="material-icons">cloud</i>five
          </a>
        </li>
      </ul>

and I have declared it as follows :-

  componentDidMount() {
    let dropdowns = document.querySelectorAll('.dropdown-trigger');

    let options = {
        inDuration: 300,
        outDuration: 300,
        hover: true, // Activate on hover
        coverTrigger: false, // Displays dropdown below the button
    };

    M.Dropdown.init(dropdowns, options);
    var instance = M.Dropdown.getInstance(dropdowns);  
  }

which displays fine, however I cannot manage to get the selected value.

I tried the following JQuery:-

$(document).ready(function(){
  $('dropdown1').formSelect(); 
});

but I am getting a type error :-

TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).formSelect is not a function

Any help will be very much appreciated!

Thanks

Answer 1

I think one should use <Select> in case of a form to select from a list of options. So, you can initialize the Materialize components in componentDidMount() lifecycle method.

I attached onChange event listener on <Select> so that we can track the value and save it in our state. I also gave the defaultValue property so that a person knows in form what he has to choose, for example, Choose a country.

CodeSandbox - Working Demo (Select in React)

Select Component

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Select extends Component {
  constructor() {
    super();

    this.state = {
      selectVal: null
    };
  }
  componentDidMount() {
    M.FormSelect.init(this.FormSelect);
  }
  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  render() {
    console.log(this.state.selectVal);
    return (
      <div className="input-field col s12">
        <select
          ref={FormSelect => {
            this.FormSelect = FormSelect;
          }}
          name="selectVal"
          onChange={this.handleChange}
          defaultValue="0"
        >
          <option value="0" disabled>
            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>
    );
  }
}

export default Select;