Mapping ReactJS list with data from an API.graphql call

Question

I'm trying to map a list with data from an API call to a DynamoDB and I admit, there are many holes in my self-taught JavaScript knowledge.

How do I expose the songList object created in songs = () => {} to my return songList.map?

I've tried with API call outside the component declaration, and in and outside a function.

import React, { Component } from 'react';
import * as queries from '../graphql/queries';
import Song from './Song';

API.configure(awsconfig);

class SongList extends Component {
  render() {
    const songs = () => {
      API.graphql(graphqlOperation(queries.listSongs)).then(function (songData) {
        const songList = songData['data']['listSongs']['items'];
        return songList;
      });
    }

    console.log(songs()); // undefined

    return (
      <div>
        {
          songList.map((song, i) => <Song
            key={i}
            title={song['title']}
            author={song['author']}
            keywords={song['keywords']}
            instruments={song['instruments']}
            isrcCode={song['isrcCode']}
            lyrics={song['lyrics']}
          />)
        }
      </div>
    )
  }
}

export default SongList;

Answer 1

never NEVER do reqests in render method

componentDidMount(){
 const songs = () => {
      API.graphql(graphqlOperation(queries.listSongs)).then(function (songData) {
        const songList = songData['data']['listSongs']['items'];
        return songList;
      });
this.setState({list:sondgs()})

}



render() {
    let list = this.state.list || []

    return (
      <div>
        {
          list.map((song, i) => <Song
            key={i}
            title={song['title']}
            author={song['author']}
            keywords={song['keywords']}
            instruments={song['instruments']}
            isrcCode={song['isrcCode']}
            lyrics={song['lyrics']}
          />)
        }
      </div>
    )
  }
}