Property 'Description' does not exist on type 'TCompany[]'

Question

I'm new to typescript and facing a problem that I'm not able to solve by myself. First I'm fetching data from API:

/* data.utils.ts */

export const getCompany = async<T> (url: string): Promise<T> =>{
  const response = await fetch(url);
  return await response.json();
}

Then I use it in the Company page component:

/* Company.tsx */

import { getCompany } from '../../../utils/data.utils';

type TCompany = {
  Name: string;
  Description: string;
  Address: string;
  MarketCapitalization: string;
};

const Company = () => {
  const [companyData, setCompanyData] = useState<TCompany[]>([]);
  let { companySymbol } = useParams();

  useEffect(() => {
    const fetchCompany = async () => {
      const url = `https://www.alphavantage.co/query?function=OVERVIEW&symbol=${companySymbol}&apikey=*******`;
      const fetchedData = await getCompany<TCompany[]>(URL);

      setCompanyData(fetchedData);
    };

    fetchCompany();
  }, []);

  return (
    <>
      <div>{companyData.Name}</div> //Property 'Name' does not exist on type 'TCompany[]'.ts(2339)
    </>
  );
};

export default Company;

But <div>{companyData.Name}</div> gives me a TS error Property 'Name' does not exist on type 'TCompany[]'.ts(2339)

the output from API:

{
"Symbol": "IBN",
"AssetType": "Common Stock",
"Name": "ICICI Bank Limited",
"Description": "ICICI Bank Limited offers various banking products and financial services in India and internationally. The company is headquartered in Mumbai, India.",
"CIK": "None",
"Exchange": "NYSE",
"Currency": "USD",
"Country": "USA",
"Sector": "TECHNOLOGY",
"Industry": "GENERAL",
"Address": "NONE",
"FiscalYearEnd": "March",
"LatestQuarter": "2021-12-31",
"MarketCapitalization": "68983734000",
"EBITDA": "None",
"PERatio": "23.73",
"PEGRatio": "0",
"BookValue": "504.33",
"DividendPerShare": "0",
"DividendYield": "0.0028",
"EPS": "0.824",
"RevenuePerShareTTM": "301.8",
"ProfitMargin": "0.22",
"OperatingMarginTTM": "0.249",
"ReturnOnAssetsTTM": "0.0149",
"ReturnOnEquityTTM": "0.139",
"RevenueTTM": "1014660530000",
"GrossProfitTTM": "966356348000",
"DilutedEPSTTM": "0.824",
"QuarterlyEarningsGrowthYOY": "0.175",
"QuarterlyRevenueGrowthYOY": "0.001",
"AnalystTargetPrice": "26.87",
"TrailingPE": "23.73",
"ForwardPE": "19.61",
"PriceToSalesRatioTTM": "0.068",
"PriceToBookRatio": "2.975",
"EVToRevenue": "-",
"EVToEBITDA": "-",
"Beta": "1.032",
"52WeekHigh": "22.34",
"52WeekLow": "14.95",
"50DayMovingAverage": "19.22",
"200DayMovingAverage": "19.5",
"SharesOutstanding": "3474310000",
"DividendDate": "2021-09-03",
"ExDividendDate": "2021-07-28"
}

How should I write the TCompany to match the types correctly??

Giving the Type any to the useState hook is not an option.

Any ideas what did go wrong here?

Answer 1

companyData is an array so you should be accessing it with indexes. Example:

companyData[0].Name

Or you should define companyData not as an array but as an object

const [companyData, setCompanyData] = useState<TCompany>({});

And then

const fetchedData = await getCompany<TCompany>(URL);