Accessing fetch() data that lives in a function

Question

I'm trying to learn React and am attempting to make a calendar for my website that is linked to a public Google Calendar. It took ages to figure out how to get to the information that I needed, but I managed it. Now, I am presented with a problem and it's more vanilla Javascript oriented...

My code looks like this:

import React, { Component } from 'react';

export default class Calendar extends Component {
    async getEventNames() {
        try {
            await fetch('https://clients6.google.com/calendar/v3/calendars/b2f8g8daabnmpqo43v04s6fl3g@group.calendar.google.com/events?calendarId=b2f8g8daabnmpqo43v04s6fl3g%40group.calendar.google.com&singleEvents=true&timeZone=Europe%2FAmsterdam&maxAttendees=1&maxResults=250&sanitizeHtml=false&timeMin=2019-04-01T00%3A00%3A00%2B02%3A00&timeMax=2019-05-06T00%3A00%3A00%2B02%3A00&key=AIzaSyBNlYH01_9Hc5S1J9vuFmu2nUqBZJNAXxs')
                .then(res => {
                    return res.json();
                })
                .then(data => {
                    const nameArr = data.items.map(item => {
                        return item.summary;
                    });
                    console.log(nameArr);
                    return nameArr;
                });
        } catch (err) {
            console.error(err);
        }
    }
    render() {
        const arr = this.getEventNames();
        console.log(arr);
        return <div />;
    }
}

So, I fetch the data from my calendar, turn it into a JSON array, map that into an array and return it. Or at least that's what I'm going for... Notice there are two console.log()s in there. The one inside the getEventNames() function presents the array that I want, but the one in my render() function gives me "Promise {pending}".

I know nothing about Promises and would be up for getting schooled on them, but also can anybody just teach me how to get the array out of my function?

Please, thank you and have nice Easter (or your culture's equivalent Springtime holiday) :)

First learn about Promise before using them because it takes time to understand the concept. And Second , You can store the array into a state and then just use map function to loop out the array — Thanveer Shah, Apr 22 '19 at 12:35
You cannot and should not call an asynchronous function with side effects from `render`. — Bergi, Apr 22 '19 at 12:42

Galupuf · Accepted Answer · 2019-04-22T12:58:32.127

It's most common to utilize state and componentDidMount, as it's the best place to "load data from a remote endpoint."

import React, { Component } from 'react';

export default class Calendar extends Component {
  constructor(props) {
   super(props);

    this.state = {
      eventNames: []
    }
  }

  componentDidMount() {
    fetch('...')
     .then(res => {
       res.json().then(eventNames => {
         this.setState({eventNames});
       });
    }).catch(err => {
     // Error handling
    })
  }

  render() {
      console.log(this.state.eventNames);
      return <div />;
  }
}

I also agree with everything stated in the comments, so please keep those in mind as well :)

https://reactjs.org/docs/react-component.html#componentdidmount

Just a tip: fetch response json() function returns a promise. So you are storing a Promise in eventNames. — F.bernal, Apr 22 '19 at 12:51

Accessing fetch() data that lives in a function

1 Answers1