projeto-hit/frontend/src/components/Report/SelectField/index.js

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField'; 



const SelectTextFields = (props) => {

  const [currency, setCurrency] = React.useState('0'); 
  
  props.currencies.push({ 'value': 0, 'label': ''})

  props.func(currency);

  const handleChange = (event) => {
    setCurrency(event.target.value);
  };
 
  

  return ( 

    <Box  
        component="form"
        sx={{
          "&:hover": {
            "&& fieldset": {
              border: "1px solid black"
            }
          },
          
            display: 'flex',
            flexDirection: 'column',
            '& .MuiTextField-root': { m: 1, },}
          }
        noValidate
        autoComplete="off"
    >
        <TextField  
          id="outlined-select-currency-native"
          margin="dense"
          size="small"
          select
          label={props.header}
          value={currency}
          onChange={handleChange} 
          SelectProps={{
            native: true,
          }}
          //helperText="Please select your currency"
        >
          {props.currencies.map((option) => (
            <option key={option.id} value={option.value}> 
              {option.label}
            </option>
          ))}
        </TextField>  

    </Box>

         
  );
}

export default SelectTextFields  










/*

return (
    <Box
      component="form"
      sx={{
        '& .MuiTextField-root': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          value={currency}
          onChange={handleChange}
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          id="outlined-select-currency-native"
          select
          label="Native select"
          value={currency}
          onChange={handleChange}
          SelectProps={{
            native: true,
          }}
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>
      </div>
      <div>
        <TextField
          id="filled-select-currency"
          select
          label="Select"
          value={currency}
          onChange={handleChange}
          helperText="Please select your currency"
          variant="filled"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          id="filled-select-currency-native"
          select
          label="Native select"
          value={currency}
          onChange={handleChange}
          SelectProps={{
            native: true,
          }}
          helperText="Please select your currency"
          variant="filled"
        >
          {currencies.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>
      </div>
      <div>
        <TextField
          id="standard-select-currency"
          select
          label="Select"
          value={currency}
          onChange={handleChange}
          helperText="Please select your currency"
          variant="standard"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          id="standard-select-currency-native"
          select
          label="Native select"
          value={currency}
          onChange={handleChange}
          SelectProps={{
            native: true,
          }}
          helperText="Please select your currency"
          variant="standard"
        >
          {currencies.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>
      </div>
    </Box>
  );

*/