Materialize carousel-item not inheriting default properties - html

Question

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

Answer 1

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.