Why does React not render my array of components?

Question

I have a JSON API response that I would like to map into a list of Child-Components, called <ReservationBox /> , like this:

    render() {
        // ... other code ...

        let res_list = [];

        fetch(request)
        .then(response => response.json())
        .then(reservations => {
            console.log(reservations)
            res_list = reservations.map((res) => <ReservationBox key={res.id} court={res.court} date={res.day} start_time={res.start} end_time={res.end} />);
            console.log(this.res_list);
        });

        return (
            <div>
                {heading}
                {res_list}
            </div>
        );
    }

Now, my reservations log correctly, and also the res_list appears correctly in the console as an array of React Components, but it won't render in the parent component.

Any idea or help will be highly appreciated, because I could not find anything on this. Thanks in advance!

Answer 1

res_list isn't available to you where you want to return it. In the then() block, put the returned array into state and use this state then in the return block.