TypeError using Materialize-CSS with React

Question

i'm having a problem using Materialize-CSS carousel. The standard way to create the carousel is :

<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>
</div>

But I want to create a carousel item for every item in an array named "products" hence i'm trying this code in the JSX :

<div className="carousel">

{generalStore.products.map(p =>
<a className="carousel-item"><img src={p.pic} /></a>)}

</div>

p,pic == image url

But this returns an error :

TypeError: Cannot read property 'clientWidth' of undefined

Ant ideas to solve this? Thanks

Is p.pic the src url for the image? I think we need to see the products structure — Sterling Archer
– Sterling Archer, Commented Jun 17, 2019 at 16:48
Could You please share the screenshot or more information about this error? Browser console usually shows the file and line of code where error occurred. — Roman Batsenko
– Roman Batsenko, Commented Jun 17, 2019 at 20:01
Hi Roman, this is a screenshot : imgur.com/bArgM40 Is it helpful? — falcon25
– falcon25, Commented Jun 18, 2019 at 8:57

Germa Vinsmoke · Accepted Answer · 2019-06-18 09:24:58Z

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.

CodeSandBox - Working Demo

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

class Carousel extends Component {
  componentDidMount() {
    const options = {
      duration: 300,
      onCycleTo: () => {
        console.log("New Slide");
      }
    };
    M.Carousel.init(this.Carousel, options);
  }

  renderThis = () => {
    return data.map(i => (
      <a key={i.url} className="carousel-item">
        <img src={i.url} />
      </a>
    ));
  };

  render() {
    return (
      <div
        ref={Carousel => {
          this.Carousel = Carousel;
        }}
        className="carousel"
      >
        {this.renderThis()}
      </div>
    );
  }
}

export default Carousel;

answered Jun 18, 2019 at 9:24

Germa Vinsmoke

3,8174 gold badges28 silver badges37 bronze badges

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

3 Comments

Germa Vinsmoke Over a year ago

Well if it's working then please accept the answer so that the question will be marked as answered.

falcon25 Over a year ago

Accepted. Sorry, didn't even know I need to mark it

Germa Vinsmoke Over a year ago

It's okay, I think you should also mark other answers which helped you in solving your problem :) Example - stackoverflow.com/questions/56410236/…

Collectives™ on Stack Overflow

TypeError using Materialize-CSS with React

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related