title: Type '() => Promise<AxiosResponse<any>>' cannot be used as an index type [ReactJs]
body: <p>I currently am working on a control panel for a page that loads up a list of cards.</p>
  
  <p>I have two different routes from an API that are as follows:</p>
  
  <pre><code>const apiVideoUrl = "http://localhost:3000/videos/";
  const apiManualUrl = "http://localhost:3000/manuals/";
  </code></pre>
  
  <p>They both return sets of data that are displayed as cards, and they both contain Id, Title, URL and ThumbnailUrl. I've been successful with just loading either videos or manuals seperately, but I Cannot seem to get them to load up together.</p>
  
  <p>my componentDidMount() is as follows and is where the error is arrising from:</p>
  
  <pre><code>async componentDidMount() {
      const apiVideoUrl = "http://localhost:3000/videos/";
      const apiManualUrl = "http://localhost:3000/manuals/";
  
      const getVideos = async () =&gt; {
        return await axios.get(apiVideoUrl);
      };
  
      const getManuals = async () =&gt; {
        return await axios.get(apiManualUrl);
      };
  
      try {
        const [videos, manuals] = await Promise.all[(getVideos, getManuals)];
  
        // render to state setState({ prop: ? })
      } catch (error) {
        this.setState({ error });
      }
    }
  </code></pre>
  
  <p>The error:</p>
  
  <pre><code>Type '() =&gt; Promise&lt;AxiosResponse&lt;any&gt;&gt;' cannot be used as an index type.ts(2538)
  </code></pre>
  
  <p>is given from:</p>
  
  <pre><code>  const [videos, manuals] = await Promise.all[(getVideos, getManuals)];
  </code></pre>
  
  <p>The code for the rest of the page  is as follows (just incase it's needed):</p>
  
  <pre><code>import React, { Component } from "react";
  import HelpCard from "./HelpCard";
  import "../help/HelpCard.css";
  import axios from "axios";
  import InfiniteScroll from "react-infinite-scroller";
  
  interface State {
    url: string;
    title: string;
    adminhelpcard: SingleAdminHelpCard[];
    error: null;
    response: {};
    thumbnail: string;
  }
  
  interface SingleAdminHelpCard {
    id: string;
    url: string;
    title: string;
    thumbnail: string;
  }
  
  interface Props {}
  
  export default class HelpList extends Component&lt;Props, State&gt; {
    state = {
      title: "",
      thumbnail: "",
      id: "",
      url: "http://localhost:3000/videos/",
      adminhelpcard: [],
      itemsCountPerPage: 1,
      activePage: 1,
      error: null,
      response: {}
    };
  
    loadAdminHelpCard = () =&gt; {
      axios
        .get(this.state.url)
        .then((res) =&gt; {
          this.setState((prevState) =&gt; {
            const adminhelpcard = prevState.adminhelpcard;
            return {
              adminhelpcard: [...prevState.adminhelpcard, ...res.data],
              url: res.data.next
            };
          });
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        });
    };
    static props: any;
  
    async componentDidMount() {
      const apiVideoUrl = "http://localhost:3000/videos/";
      const apiManualUrl = "http://localhost:3000/manuals/";
  
      const getVideos = async () =&gt; {
        return await axios.get(apiVideoUrl);
      };
  
      const getManuals = async () =&gt; {
        return await axios.get(apiManualUrl);
      };
  
      try {
        const [videos, manuals] = await Promise.all[(getVideos, getManuals)];
  
        // render to state setState({ prop: ? })
      } catch (error) {
        this.setState({ error });
      }
    }
  
    deleteProduct(id: any) {
      const { adminhelpcard } = this.state;
  
      const apiVideoUrl = `http://localhost:3000/videos/${id}`;
      const apiManualUrl = `http://localhost:3000/manuals/${id}`;
  
      const options = {
        method: "DELETE"
      };
  
      fetch(apiVideoUrl, options)
        .then((res) =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              response: result,
              adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) =&gt; adminhelpcard.id !== id)
            });
          },
          (error) =&gt; {
            this.setState({ error });
          }
        );
      fetch(apiManualUrl, options)
        .then((res) =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              response: result,
              adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) =&gt; adminhelpcard.id !== id)
            });
          },
          (error) =&gt; {
            this.setState({ error });
          }
        );
  
      console.log(this.state.id);
    }
  
    editProduct(id: any, title: string, url: string, thumbnail: string) {
      const { adminhelpcard } = this.state;
      const apiVideoUrl = `http://localhost:3000/videos/${id}`;
      const apiManualUrl = `http://localhost:3000/manuals/${id}`;
  
      const options = {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title,
          url,
          thumbnail
        })
      };
  
      fetch(apiVideoUrl, options)
        .then((res) =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              response: result,
              adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) =&gt; adminhelpcard.id !== id)
            });
          },
          (error) =&gt; {
            this.setState({ error });
          }
        );
      fetch(apiManualUrl, options)
        .then((res) =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              response: result,
              adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) =&gt; adminhelpcard.id !== id)
            });
          },
          (error) =&gt; {
            this.setState({ error });
          }
        );
    }
  
    render() {
      console.log(this.state.adminhelpcard);
      return (
        &lt;div&gt;
          &lt;React.Fragment&gt;
            {this.state.adminhelpcard ? (
              &lt;div className="row"&gt;
                &lt;InfiniteScroll
                  pageStart={1}
                  loadMore={this.loadAdminHelpCard}
                  hasMore={this.state.url ? true : false}
                  threshold={0}
                  loader={
                    &lt;div className="loader" key={0}&gt;
                      Loading ...
                    &lt;/div&gt;
                  }&gt;
                  {this.state.adminhelpcard.map((adminhelpcard: SingleAdminHelpCard, i) =&gt; (
                    &lt;HelpCard
                      id={adminhelpcard.id}
                      key={adminhelpcard.id + i}
                      title={adminhelpcard.title}
                      url={adminhelpcard.url}
                      thumbnail={adminhelpcard.thumbnail}
                      deleteProduct={this.deleteProduct.bind(this)}
                      editProduct={this.editProduct.bind(this)}
                    /&gt;
                  ))}
                &lt;/InfiniteScroll&gt;
              &lt;/div&gt;
            ) : (
              &lt;h1&gt;Loading Cards&lt;/h1&gt;
            )}
          &lt;/React.Fragment&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>What is triggering this error and for what reason?</p>
  
  <p>--------------------------EDIT----------------------------------
  This is the return of the console.log</p>
  
  <pre><code>[
    {
      "data": [
        {
          "id": 1,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e.mp4",
          "title": "How to train your dragon video",
          "thumbnail": "https://i.ytimg.com/vi/l3uyjXJl2Fw/hqdefault.jpg"
        },
        {
          "title": "Guide - Web",
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-6928.mp4",
          "thumbnail": "https://i.ytimg.com/vi/Um3BhY0oS2c/hqdefault.jpg",
          "id": 2
        },
        {
          "title": "Reports - Non-Supervisors",
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
          "thumbnail": "",
          "id": 3
        },
        {
          "id": 4,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
          "title": " - Non-Supervisors",
          "thumbnail": ""
        },
        {
          "id": 5,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
          "title": " - Non-Supervisors",
          "thumbnail": ""
        },
        {
          "id": 6,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-198.mp4",
          "title": "Supervisors",
          "thumbnail": ""
        },
        {
          "id": 7,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-deos+1263198.mp4",
          "title": "Supervisors",
          "thumbnail": ""
        }
      ],
      "status": 200,
      "statusText": "OK",
      "headers": {
        "pragma": "no-cache",
        "content-type": "application/json; charset=utf-8",
        "cache-control": "no-cache",
        "expires": "-1"
      },
      "config": {
        "transformRequest": {},
        "transformResponse": {},
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "headers": {
          "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:3000/videos/"
      },
      "request": {}
    },
    {
      "data": [
        {
          "id": 1,
          "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-ite.pdf",
          "title": "How to train your dragon",
          "thumbnail": ""
        },
        {
          "id": 2,
          "url": "https://onaws.com/ts-ui.e-s.pdf",
          "title": "How to train your dragon test3",
          "thumbnail": ""
        },
        {
          "id": 3,
          "url": "https://sm/ts-ui.e-ide.pdf",
          "title": "Resume full guide",
          "thumbnail": ""
        }
      ],
      "status": 200,
      "statusText": "OK",
      "headers": {
        "pragma": "no-cache",
        "content-type": "application/json; charset=utf-8",
        "cache-control": "no-cache",
        "content-length": "634",
        "expires": "-1"
      },
      "config": {
        "transformRequest": {},
        "transformResponse": {},
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "headers": {
          "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:3000/manuals/"
      },
      "request": {}
    }
  ]
  </code></pre>