JAVASCRIPT: Nothing was returned from render even though return statement exists

Question

So I have this Display() function which fetches events from the Google Calendar via an API and store each event's name via element.summary into the events set. And then once the events set is populated, I iterate through the set via for (let item of events) and create a new <a> tag for each event/item in the set using the name as the text via <a>{item}</a> (for e.g. <a>call<a>, then I push each <a> tag into a new array called tabs and then finally return the tabs array. The events set contains three items and when I console.log, I see the correct items ("call", "kist", & "go") in the set. However, once I console.log the tabs array, it only contains one <a> tag whose value is null whereas it is supposed to contain three <a> tags since it iterates through the events set which has three items and is supposed to create an <a> tag for each. Also, I get the error that item is not defined for the line for (let item of events), somehow I cannot iterate through the events set. See console output here.

function Display() {
    let events = new Set()
    let tabs = []
    ApiCalendar.listUpcomingEvents(10)
        .then(({result}: any) => {
            result.items.forEach(element => {
                    console.log(element.summary)
                    events.add(element.summary)
                }
            );
            console.log(events)
            for (let item of events)
                console.log(item)
                tabs.push(<a>{item}</a>)
            console.log(tabs)
            return tabs
        });
}

This is the class that I made in the same file as the above function, which basically renders a 'Log In' button if user is not logged in to their calendar, or renders the array of <a> tags returned by the Display() function if user is already logged in. However, even though the Display() function above does return something (i.e. an array of <a> tags) and the render() function inside the class also returns a <div> element with the corresponding component inside the div, I get the error Uncaught Error: Display(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. I am new to JavaScript and have no idea what I'm doing wrong. Any help is greatly appreciated and thank you in advance.

export default class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sign: ApiCalendar.sign,
        };
    }

    render() {
        const isLoggedIn = this.state.sign;
        let ele;

        if (isLoggedIn) {
            ele = <Display/>;
        } else {
            ele = <Button>'Sign In'</Button>;
        }

        return (
            <div>
                {ele}
            </div>
        );
    }
}

Answer 1

Your Display function calls an async method and returns nothing. You will need to utilize state and effect inside Display to render returned data. But then, you will encounter errors if user navigates away from page before data is fetched.

Best solution for this problem would be to utilize redux and redux-thunk

---

Caution, untested code below

If you feel like you don't need redux, try this approach

async function fetchItems() {
  const result = await ApiCalendar.listUpcomingEvents(10);
  return result.result.items.map(({summary}) => summary);
}

function Display() {
  const [items, saveItems] = useState([]);
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    (async () => {
      const items = await fetchItems();
      //Do not update state if component is unmounted
      if (isMounted.current) {
        saveItems(items);
      }
    })();
  }, []);

  return <>{items.map(item => <a key={item}>{item}</a>)}</>
}

If you want to render more than summary, you can do it like this

async function fetchItems() {
  const result = await ApiCalendar.listUpcomingEvents(10);
  return result.result.items.map(({summary, somethingElse}) => ({summary, somethingElse}));
  //can be replaced with return [...result.result.items]; to get all props
}

function Display() {

  //... Main logic of Display component is the same, 
  //so I wouldn't duplicate it here

  return <>{items.map(item => <div key={item.summary}>{item.summary} {item.somethingElse}</div>)}</>
}

Answer 2

It seems that you are not returning anything on Display component.

You can't return a promise on a component so you need to make it inside useEffect using react hooks or component lifecycle - and no, you don't need redux just to achieve this.

function Display() {
    let events = new Set()
    let tabs = [];
    const [items, setItems] = useState([]);

    const getList = async () => {
      const res = await  ApiCalendar.listUpcomingEvents(10);

       setItems(res.items);
    }

    useEffect(async () => {
      getList();
    }, []);

  return items.map(item => <div>{item}</div>);
}