Simple-fetch.jsx

import * as React from "react";
import Avatar from "@collab-ui/react/lib/Avatar";
import "@collab-ui/core/css/collab-ui.min.css";
import "@collab-ui/icons/css/collab-ui-icons.css";
import { PropertyControls, ControlType, Data } from "framer";

const style: React.CSSProperties = {
    margin: "0 0 20px 20px",
    objectFit: "cover"
};

export class Avatar extends React.Component {

    state = {
        astronauts: [],
        avatars: []
    }

    // Fetch Astronauts
    fetchAstronauts() {
        fetch("http://api.open-notify.org/astros.json")
        .then(data=>{return data.json()})
        .then(astronautsResult=>{

            fetch("https://tinyfac.es/api/users")
            .then(data=>{return data.json()})
            .then(avatarResults=>{

                this.setState({
                    astronauts: astronautsResult.people,
                    avatars: avatarResults
                });      
        })
        })
    }

    componentDidMount(){
        this.fetchAstronauts();
        //this.fetchAvatars();
    };

    render() {
        return (
            <div>
                {
                    
                    this.state.astronauts.map((element, i) => {
                        return <Avatar style={style} src={this.state.avatars[i].avatars[1].url} size={80} title={element.name}/>
                    })
                }

            </div>
        )
    }
}