I am facing an issue with displaying my components on the screen after completing a promise. I am utilizing the imgur API to make requests, and although the request works fine and data is received back from the API, when I update the state in my component and pass it as props, no data is displayed.
Below is my main component named app.js
import React, {Component} from 'react';
import axios from 'axios';
import ImageList from './image_list';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {images: []};
}
componentWillMount() {
// Retrieving an array of 60 objects from IMGUR_URL.
axios.get(IMGUR_URL).then(res => this.setState({images: res.data.data}));
}
render() {
return (
<div>
{/* Passing the images state */}
<ImageList images={this.state.images} />
</div>
);
}
}
I have seen some examples using the componentDidMount function, but they did not bring any changes to my application.
Here are my two child components:
The value of props is obtained from the ImageList component.
image_detail.js
import React, {Component} from 'react';
export default class ImageDetail extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<li>
<img src={this.props.image.images[0].link} alt={this.props.image.title} />
</li>
</div>
);
}
}
The values of props are coming from App.js through the axios GET request. So, I am uncertain about what I might be overlooking here.
image_list.js
import React, {Component} from 'react';
import ImageDetail from './image_detail';
export default class ImageList extends Component {
constructor(props) {
super(props);
this.RenderedImages = this.props.images.map(image => <ImageDetail key={image.id} image={image} />);
}
render() {
return (
<div>
<ul> {this.RenderedImages} </ul>
</div>
);
}
}
Additionally, I am unsure about what should be included inside the constructor method.