CODEWITHSUNDEEP
htmlcssreactjsmaterialize
Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Materialize carousel-item not inheriting default properties

Able to fetch the data from API. But the problem is when I try to map the carousel-item inside class carousel. The properties are not being inherited.

When I inspect, I see there are carousel-item inside carousel, but they are not having the default properties.

This is my Carousel Class

class Carousel extends Component {
constructor(props){
  super(props);
  this.state = { albums: [] };
}
    componentWillMount() {
      axios.get('http://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState({albums: response.data}));
    }
    renderAlbums(){
      return this.state.albums.map(album =>
            <Card song={album.title} singer={album.artist} src={album.thumbnail_image}/>
      );
     }
  render() {
    return (
      <div className="carousel center">
        {this.renderAlbums()}
      </div>
    );
  }
}
export default Carousel;

This is my Card Component

import React, { Component } from 'react';
import '../../App.css';

class Card extends Component {
  render() {
    return (
      <div className="carousel-item center">
        <div className="card z-depth-4">
          <div>
            <img src={this.props.src} className="responsive-img"/>
          </div>
          <p>{this.props.song}</p>

          <div className="singer">{this.props.singer}</div>
        </div>
      </div>
    );
  }
}
export default Card;

Please suggest if there is any other way, to import it. Already have initialised carousel and it's working if I try the Materialize Example

Upvotes: 0

Views: 229

Answers (1)

Thomas Hennes
Thomas Hennes

Reputation: 9979

Try performing your API call in componentDidMount instead of componentWillMount.

The latter is called before the initial render, and thus, if your API call returns before the component finishes mounting, the setState statement will not cause a re-render.

With the former, setting the state will always cause a re-render to occur. React documentation recommends initiating data requests from remote endpoints from componentDidMount. See here.

Upvotes: 1

Related Questions