How to display data from the database in select option? - reactjs

Question

I can succesfully get the data from my database , but how can I display it Inside the Select?
This is where i want to display my data inside the select
<Select
fullWidth
value={newUsers}
onChange={handleChange}
>
<MenuItem value={0}>{newUsers.label}</MenuItem>
this is how i call the data from the database (this is working and I can see the data from my console)
const [newUserLists, setNewUserLists] =useState([]);
const newUsers= [];
const fetchData = async () => {
const response = await getreason();
response.data.map(function(u){
newUsers.push({
label: u.applicationcode,
value: u.applicationid
})
})
setNewUserLists(newUsers)
}
useEffect(() => {
fetchData();
}, [reRender]);
this is the result in console.log

Answer 1

Let's model this on the Material-UI Select tutorial and API doc page. There, we can see a few things:
value is the currently selected input value. It appears you're trying to set it to the list of objects that you read from the DB response, which is not correct. It is common practice to say something like the following:
const [selected, setSelected] = useState("");
const handleChange = (event) => {
setSelected(event.target.value);
};
return (
<FormControl>
<InputLabel>Selection</InputLabel>
<Select
value={selected}
onChange={handleChange}
>
{/* MenuItems go here */}
</Select>
</FormControl>
);
On an unrelated (to Material-UI) note, you seem to not actually use newUserLists in your code. I'm going to make the assumption that newUsers is just a placeholder to munge the data from the response into, but per #Naim-Mustafa's answer, it isn't needed and should not be used in your display.
Now, how do we use newUsersList to generate a list of MenuItems? Just as you've done elsewhere, map is the key:
{newUsersList.map(({ label, value }) => (
<MenuItem id={value} value={value}>
{label}
</MenuItem>
))}
Note that I'm assuming value is unique for the purposes of the id field. If it is not, replace with something more appropriate.

Answer 2

You can change const newUsers= []; to let newUsers= [];
but you dont have to use newUsers array at all, instead try using the state
const [newUserLists, setNewUserLists] =useState([]);
const [selectedOption, setSelectedOption] = useState();
const fetchData = async () => {
const response = await getreason();
setNewUserLists(response.data.map(user => ({
label: user.applicationcode,
value: user.applicationid})))
}
useEffect(() => {
fetchData();
}, [reRender]);
return (
<>
<select value={selectedOption}
onChange={(event) => setSelectedOption(event.target.value)}
>
{newUserLists
.map(user =>
<option key={user.label} value={user.label}>
{user.label}</option>}
</select>
</>