Dynamic MenuItem from state materialUI

Question

I am trying to show a different list of menu items according to the gender state, but having some trouble. Here below are the const values.

const maleArray = ["A", "B", "C", "D"]
const femaleArray = ["E", "F", "G"]
const [gender ,setGender] = useState("")

const genderItems = () => {
    if (gender === null) { return }
        else if (gender === "male") {
            maleArray.map(item => (
                <MenuItem key = {item} value={item}>{item}</MenuItem>
            ))
        } else {
             femaleArray.map(item => (
                <MenuItem key = {item} value={item}>{item}</MenuItem>
            ))
        }
    }

I am using Material UI MenuItems.

<InputLabel id="gender">Gender</InputLabel>
                               
   <Select
     labelId="gender"
     id="gender"
     fullWidth
     label="Gender"
     value={gender}
     onChange={handleGenderChange}
    >
    {genderItems()}
   </Select>

When the gender state changes to either male or female, I want to populate the MenuItem dropdown. I am calling genderItems that hopefully renders the MenuItem components but it is not showing anything.

Answer 1

Can you try returning them maybe.

const genderItems = () => {
  if (gender === null) {
    return;
  } else if (gender === "male") {
    return maleArray.map((item) => (
      <MenuItem key={item} value={item}>
        {item}
      </MenuItem>
    ));
  } else {
    return femaleArray.map((item) => (
      <MenuItem key={item} value={item}>
        {item}
      </MenuItem>
    ));
  }
};

Also ensure your gender state is being updated.