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
– keul, Commented Jul 20, 2018 at 9: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
– keul, Commented Jul 20, 2018 at 10:30

Manoz · Accepted Answer · 2018-07-20 09:38:13Z

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, 2018 at 9:38

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Germa Vinsmoke Over a year ago

In this case, you'll get erros, M is undefined and then init is undefined.

Collectives™ on Stack Overflow

Error on using Carousel in react application

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related