React Can't Access Array Inside Object

Question

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.

Answer 1

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>
    )
  }

Answer 2

        const memes = res.data.memes

        this.setState({ memes })

Answer 3

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.