Untitled

import React from "react";
import { useState } from 'react';
import {  MenuItem, Select } from "@mui/material";
import { InputLabel } from "@mui/material";
import { FormControl } from "@mui/material";
import axios from 'axios';
let test = 0;

function DeleteCategory(props : any) {
    const [open, setOpen] = React.useState<boolean>(false);
    const [kpis, setKpis] = React.useState<Array<string>>([]);
    const handleChange = (event: React.MouseEvent<HTMLElement>) => {
        console.log("setKpi: " + event.currentTarget);
        props.setKpi(event.currentTarget.textContent);
    };
    const handleOpen = () => {
        setOpen(true);
    };
    const handleClose = () => {
        setOpen(false);
    };
 
    if (test == 0) {
      axios.get('http://127.0.0.1:8000/api/get_all_kpis')
      .then((response) => {
        test = 1;
        for (let c = 0; c < response.data.kpis.length; c++) {
          setKpis(prevKpis =>([...prevKpis, response.data.kpis[c].name])
          );
        }
      }).catch(e => {
        console.log(e.response);
      });
    }

    return(
      
        <FormControl style={{width:200}}>
        <InputLabel id="demo-controlled-open-select-label">Poista Kategoria</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={props.kpi}
          onClick={handleChange}
        >
          {kpis.map((value, index) => {
            return(
              <MenuItem key={index} onClick={handleChange}>{value}</MenuItem>
            )
          })}
        </Select>
      </FormControl>
    );
}

export default DeleteCategory;