how to show data fetched from api in select mui

Question

I'm trying to show the data, I fetched from Api in select menu. but there seems to be a issue. I'm getting the data, but it's not showing in the select menu. it just shows empty. but I can get the mapped data in console. it just not showing in the select component. help me figure out. thanks in advance:)

here's my code

    export function TransferRBTCard(props) {
  const [TransferData, setTransferData] = useState([])
  const [ContactValue, setContactValue] = useState('')

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

  const TokenData = () => {
    axios.get('http://localhost:8006/api/v2/get/list').then(function (res) {
      try {
        var result = res.data.data;
        console.log(result)
        setTransferData(result)
      }
      catch (error) {
        console.log(error)
      }
    })
  }

  useEffect(() => {
    TokenData()
  }, [])]

  const handleSubmit = (evnt,) => {
    evnt.preventDefault();
    axios.post('http://localhost:8006/api/v2/add/transfer')
      .then(response => {
        if (response.data.success === true) {
          alert(response.data.message)
        }
      })
      .catch(error => {
        console.log(error.message)
      });
  }

  return (
    <Card {...props}>
      <CardContent>
        <Stack direction="row" alignItems="center" gap={1}>
          <ShareOutlinedIcon sx={{ color: "text.secondary" }} />
          <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
            Transfer RBT
          </Typography>
        </Stack>
        <Grid>
          <FormControl size="small" fullWidth >
            <Stack flexDirection='column' gap={1.5} mt={1}>
              <InputLabel id="Contact Select" sx={{ mt: 1 }}>Select Contact</InputLabel>
              <Select
                labelId="Contact Select"
                id="demo-simple-select"
                value={ContactValue}
                label='Select Contact'
                onChange={handleChange}
              >
                {TransferData.map((data) => {
                  <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
                })}
              </Select>
              <TextField
                id="filled-hidden-label-small"
                label="Receiver" variant="outlined" size="small"
                onChange={handleChange}
                value={TransferData}
                name="Receiver"
                inputProps={
                  { readOnly: true, }}
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small" type='number'
                label="Amount" variant="outlined" size="small"
                onChange={handleChange}
                name="Amount"
                className="form-control"
              />
              <TextField
                id="filled-hidden-label-small"
                label="Comments" variant="outlined"
                multiline
                rows={2}
                onChange={handleChange}
                name="Comments"
                className="form-control"
              />
              <Button
                variant="contained"
                type="submit"
                onClick={handleSubmit}
                sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
            </Stack>
          </FormControl>
        </Grid>
      </CardContent>
    </Card>
  );
}

Answer 1

You are not returning from the map function (more correctly, you return undefined by not stating a return).

Change this:

{TransferData.map((data) => {
  <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
})}

to this:

{TransferData.map((data) => (
  <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
))}

Note that it is the same as writing:

{TransferData.map((data) => {
  return <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
})}