I'm trying to access an array within an object. The object form is:
{memes : {
data: {memes: Array(100)}
success: true
}}
import React from 'react';
import API from './functions/api';
import styles from './App.module.css';
class App extends React.Component {
state = {
memes: []
}
componentDidMount(){
API.get().then(
res => {
// axios function returns Object
const memes = res.data
this.setState({ memes })
}
)
}
displayMemes(){
console.log( this.state.memes );
// memes: {
// data: {
// memes: Array(100)
// }
// }
this.state.memes.data.memes.forEach( meme => {
// Cannot read properties of undefined (reading 'forEach')...
});
}
render(){
return(
<div className={ styles.container }>
{ this.displayMemes() }
</div>
)
}
}
export default App;
Clearly I don't know what I'm doing wrong, I'm fairly new to this, the solution has to be simple.
I'm trying to get data from an open API ('https://api.imgflip.com/get_memes') to practise implementing different types of React apps.
Calling an API is an asynchronous action which takes some time to resolve.
You can initialize memes with a null value first.
state = {
memes: null
}
Check if memes is not null before calling displayMemes so that you prevent calling it before getting the API response.
render(){
return(
<div className={styles.container}>
{this.state.memes && this.displayMemes()}
</div>
)
}
const memes = res.data.memes
this.setState({ memes })
The forEach function always returns undefined after traversing through the array. Change it to map which returns an array.
class App extends React.Component {
state = {
memes: null,
isLoading: true
};
componentDidMount() {
fetch("https://api.imgflip.com/get_memes")
.then((res) => res.json())
.then((memes) => {
this.setState({ memes });
this.setState({ isLoading: false });
});
}
displayMemes() {
return this.state.memes.data.memes.map((meme) => {
return <div>{meme.name}</div>;
})
}
render() {
return this.state.isLoading ? "No memes" : <div>{this.displayMemes()}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>I added isLoading to call displayMemes when data has been fetched.