I'm trying to add the Carousel image slider from MaterializeCSS to a simple React ponent but i'm not able to initialize it! It would be very helpful to know where i should do it in my code

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

export default class Slider extends Component {
  ponentDidMount() {
   var elem = document.querySelector('.carousel');
   var instance = M.Carousel.init(elem, { duration: 200 });
 }
render() {
 return (
  <div className="container center-align">
   <h1 className="header pink-text">Slider</h1>
    <div className="carousel">
      <a className="carousel-item" href="#one!">
        <img src=".jpg" />
      </a>
      <a className="carousel-item" href="#two!">
        <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#three!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#four!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
       <a className="carousel-item" href="#five!">
        <img src="../../public/images/lana/1.jpg" />
       </a>
     </div>
    </div>
  );
 }
}

this gives me an Error: Cannot read property 'Carousel' of undefined

i tried to do it with Jquery, no errors but didn't work!

I'm trying to add the Carousel image slider from MaterializeCSS to a simple React ponent but i'm not able to initialize it! It would be very helpful to know where i should do it in my code

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

export default class Slider extends Component {
  ponentDidMount() {
   var elem = document.querySelector('.carousel');
   var instance = M.Carousel.init(elem, { duration: 200 });
 }
render() {
 return (
  <div className="container center-align">
   <h1 className="header pink-text">Slider</h1>
    <div className="carousel">
      <a className="carousel-item" href="#one!">
        <img src="https://www.w3schools./images/picture.jpg" />
      </a>
      <a className="carousel-item" href="#two!">
        <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#three!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#four!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
       <a className="carousel-item" href="#five!">
        <img src="../../public/images/lana/1.jpg" />
       </a>
     </div>
    </div>
  );
 }
}

this gives me an Error: Cannot read property 'Carousel' of undefined

i tried to do it with Jquery, no errors but didn't work!

• javascript
• reactjs
• carousel
• materialize

7 Answers 7

I had the same issue.

Solved it by adding the materializecss npm module

npm install materialize-css

and then importing it into the ponent

import M from "materialize-css";

and in the ponentDidUpdate method, added the init

ponentDidUpdate() {

    let collapsible = document.querySelectorAll(".collapsible");

    M.Collapsible.init(collapsible, {});
  }

Problem solved!!

Using React Hook with useEffect you can also initialize each feature on Materialize, for example:

    import React, { useEffect, Fragment } from "react";

    import M from "materialize-css/dist/js/materialize.min.js";

useEffect(() => {
    // Init Tabs Materialize JS
    let tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
});

In my case, I used tabs to initialize the Materialize feature.

Looks like you're using a .min file to import M from. You should install MaterializeCSS as a node module instead. You're getting an error because M is not defined as anything. There aren't any exports from that .min file.

If you want to wait until the script has loaded it is better to do that with a callback instead of setTimeout.

function loadScript(url, callback) {
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (callback) { 
    script.onload = callback; 
  }
  document.body.appendChild(script)
  script.src = url;
}


loadScript(pathtoscript, function() {
  alert('script ready!'); 
});

If you want to use min.js file in your application, try adding it in html file using tag.

Alternatively try adding node modules using npm package.

Hope this helps.

I figured out that it needs some time to render the content. When I use setTimeout() function and call that initialization JS lines it worked.

I initialize the Carousel js code from the main html page with setTimeout() function, i used a spinner to make look little better

it looks like this

<script>

    setTimeout(() => {
      var elem = document.querySelector('.carousel');
      var instance = M.Carousel.init(elem, {});
      if (document.querySelector('.photos').classList) {
        document.querySelector('.photos').classList.remove("spinner")
      }
    }, 2000)
  </script>

add window.M. ...

  useEffect(() => {
var elem = document.querySelector(".carousel");
var instance = window.M.Carousel.init(elem, {
  fullWidth: true,
  indicators: true,
});

});