Materializecss tabs are not working with React (npm import)

Question

I've been looking through other people's solutions to my problem and the Materializecss documentation, but I can't get the MaterializeCss tabs and other components under the javascript section to work in my React project.

import M from 'materialize-css';

componentDidMount() {
  let el = document.querySelector('.tabs');
  let instance = M.Tabs.init(el, {});
}

render() {
  return (
    <div className="App">
      <div className="row">
        <div className="col s12">
          <ul className="tabs">
            <li className="tab col s3">
              <a href="#test1">Test 1</a>
            </li>
            <li className="tab col s3">
              <a className="active" href="#test2">
                Test 2
              </a>
            </li>
            <li className="tab col s3 disabled">
              <a href="#test3">Disabled Tab</a>
            </li>
            <li className="tab col s3">
              <a href="#test4">Test 4</a>
            </li>
          </ul>
        </div>
        <div id="test1" className="col s12">
          Test 1
        </div>
        <div id="test2" className="col s12">
          Test 2
        </div>
        <div id="test3" className="col s12">
          Test 3
        </div>
        <div id="test4" className="col s12">
          Test 4
        </div>
      </div>
    </div>
  );
}

I've tried the Jquery implementation as well but that doesn't work either. Just putting script tags and the tabs code in the body of my index.html file works, but is very limiting. I'm required to use MaterializeCss so react-materialize isn't an option.

Would love to get some advice on this.

Answer 1

It can be implemented in materializeCSS also. For this, you need to do npm install materialize-css@next. After this, you need to import the materialize-css in your component JS file.

To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() has to be made and then it can be used in ref.

Working Demo - Tabs MaterializeCSS

You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize

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

class Tabs extends Component {
  componentDidMount() {
    M.Tabs.init(this.Tabs);
  }
  render() {
    return (
      <>
        <ul
          ref={Tabs => {
            this.Tabs = Tabs;
          }}
          id="tabs-swipe-demo"
          className="tabs"
        >
          <li className="tab col s3">
            <a href="#test-swipe-1">Test 1</a>
          </li>
          <li className="tab col s3">
            <a href="#test-swipe-2">Test 2</a>
          </li>
          <li className="tab col s3">
            <a href="#test-swipe-3">Test 3</a>
          </li>
        </ul>

        <div id="test-swipe-1" className="col s12 blue">
          Test 1
        </div>
        <div id="test-swipe-2" className="col s12 red">
          Test 2
        </div>
        <div id="test-swipe-3" className="col s12 green">
          Test 3
        </div>
      </>
    );
  }
}

export default Tabs;