Untitled

import { React, useState, useEffect } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

export default function Stocks() {

    const API_KEY = '35bc7fd74ee10e088e02607913e574bb';
    const [rowData, setRowData] = useState([]);


    const actualTable = {
        columns: [
            { headerName: "Symbol", field: "symbol"},
            { headerName: "Name", field: "name"},
            { headerName: "Sector", field: "sector"},
            { headerName: "Founded", field: "founded"}
        ], rowData
        
    }

    async function getUrl() {
        let res = fetch ("https://financialmodelingprep.com/api/v3/nasdaq_constituent?apikey=35bc7fd74ee10e088e02607913e574bb");
        let data = (await res).json();
        return data.map(marketData =>{
            return {
                symbol: marketData.symbol,
                name: marketData.name,
                sector: marketData.sector,
                founded: marketData.founded
             }
        })
        
    }

    useEffect(() => {
        (async () => {
                setRowData(await getUrl);
        })();
    }, []);

    function StocksTable() {
        return (
            <div
                className="ag-theme-balham"
                style={{
                    height: "200px",
                    width: "100%"
                }}
            >
                <AgGridReact
                    columnDefs={actualTable.columns}
                    rowData={rowData}
                    pagination={true}
                />
            </div>
        );
    }


    return (
        <div>
            <h1>Stocks</h1>
            <p>Below are a list of stocks organized by their symbol. A symbol is a unique identifier of that company on the stock exchange.</p>
            <p>By default it a full list of stocks are shown, if you are interested in a specific sector you can use the dropdown to select a sector of interest.</p>
            <p>If you would like to search a specific company, type your search into the search bar and then click the 'Search' button.</p>
            <p>*italicise this* Note: if you do not see your company code, try turning your filter back to All for sector.</p>


            <StocksTable/>



        </div>
    )
}