Error on using Carousel in react application

Question

I am using MaterializeCSS in react application. On using Carousel in my render with javascript code for it. I get error at M

 class App extends React.Component {

   render() {
       document.addEventListener('DOMContentLoaded', function() {
       var elems = document.querySelectorAll('.carousel');
       var instances = M.Carousel.init(elems, options);
  });
        return (
          <div>
     <div class="carousel">
        <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
        <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
        <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
        <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
      </div>
         </div>
        )
      }
    }

Which error? Can you share the traceback? How do you import "M"? — keul, Jul 20 '18 at 09:31
OK, so you need to import 'M' from somewhere. I've no idea of what documentation you are talking about, can you share it also? — keul, Jul 20 '18 at 10:30
If you npm/yarn installed it, try to `import M from 'materialize-css'` Note: maybe you will have less issues by using a react wrapper. See https://stackoverflow.com/questions/35499842/how-to-use-materialize-css-with-react — keul, Jul 20 '18 at 11:11

score 0 · Answer 1 · answered Jul 20 '18 at 09:38

0

You should initialize Carousel in componentDidMount() event of React Lifecycle to make sure if DOM has been loaded fully.

use it and let render() be neat and clean.

componentDidMount(){
   document.addEventListener('DOMContentLoaded', function() {
       var elems = document.querySelectorAll('.carousel');
       var instances = M.Carousel.init(elems, options);
  });
}

Also I assume you've options defined in the Component.

answered Jul 20 '18 at 09:38

Manoz

6,507
13
68
114

In this case, you'll get erros, `M` is undefined and then `init` is undefined. – Germa Vinsmoke Jul 22 '18 at 12:11

Error on using Carousel in react application

1 Answers1