Seeking assistance with Material UI select element and naming dropdown. Have a few questions:
1: My API that populates the dropdown lacks good names. Is it possible to assign names like 'data 1, data 2, data 3...' to the options without manually editing the array in the API?
Currently, I have set it to '{option.label}' which comes from an array of objects. Is there a way to automatically set names like 'data 1, data 2, data 3...' without directly modifying the array (which could be quite extensive)?
2: Despite setting a background color, it doesn't seem to affect that particular section. Any insights on why this might be happening?
3: The input label name is positioned above the select field. How can I move it inside instead?
I have scoured Stack Overflow for answers without much luck, hence reaching out here with all three queries. Apologies for any language errors as English is not my native tongue.
Codesandbox: https://codesandbox.io/s/basicselect-material-demo-forked-bpu71w?file=/demo.js
https://i.sstatic.net/aEkX3.png
Here's the code snippet for reference:
import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import "./Tama.css";
export default function BasicSelect() {
const [dataa, setData] = React.useState("twny");
const handleChange = (event) => {
setData(event.target.value);
};
const data = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
return (
<Box sx={{ m: 1 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select value={dataa} onChange={handleChange} className="ok">
{data.map((option) => (
<MenuItem
className="menuItem"
onClick={() => console.log("Chosen: ", option.label)}
key={option.value}
value={option.value}
>
{option.label}
<button
className="menuItem__button"
onClick={() => console.log("Clicked: ", option)}
>
Edit
</button>
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}.menuItem {
border: 1px solid gray;
background-color: #1e2328;
color: red;
}
.menuItem__button {
margin-left: 90%;
}
#demo-simple-select-label {
color: red;
}
.ok {
background-color: #1e2328;
color: white;
}