Materializecss data-length not working in react

Question

This is my app component rendering on the screen but data-length attribute passed to the input field is not working else is working just perfectly fine. You can check is truly easily on the offical docs of materialize css :- https://materializecss.com/text-inputs.html

import React, { Component } from "react";
import M from "materialize-css";

class App extends Component {
  componentDidMount() {
    M.AutoInit();
  }
  render() {
    return (
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input id="input_text" type="text" data-length="10" />
              <label for="input_text">Input text</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <textarea
                id="textarea2"
                class="materialize-textarea"
                data-length="120"
              ></textarea>
              <label for="textarea2">Textarea</label>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

Answer 1

In case of React, whenever we use some kind of third party library or framework then we need to use componentDidMount() for initializing the js components provided by them.

There are few things which are different from materialize docs -

• Importing import "materialize-css/dist/css/materialize.min.css";
• Initialization in componentDidMount
• Using maxLength attribute instead of data-length.

Codesandbox working demo.

For other components, you can check Reactize

Code

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

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

    this.state = {
      text: ""
    };
  }

  componentDidMount() {
    let input = document.getElementById("input_text");
    M.CharacterCounter.init(input);
  }

  onTextChange = event => {
    this.setState({
      text: event.target.value
    });
  };

  render() {
    return (
      <div className="row">
        <form className="col s12">
          <div className="row">
            <div className="input-field col s6">
              <input
                id="input_text"
                type="text"
                maxLength="10"
                onChange={this.onTextChange}
                value={this.state.text}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default Counter;