Populate React MUI dropdown list with dynamic data from axios Get request

Question

import { useEffect, useState } from "react";

import Box from "@mui/material/Box";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";

const DropdownList = (props) => {
  const [course, setCourse] = useState("");

  const handleChange = (event) => {
    setCourse(event.target.value);
    // props.onSelectedCourse(event.target.value);
  };

  return (
    <div>
      <Box sx={{ minWidth: 120 }}>
        <FormControl fullWidth>
          <InputLabel id="inputId">Select Courses</InputLabel>
          <Select
            id="demo-simple-select"
            labelId="inputId"
            value={course}
            label="Select Courses"
            onChange={handleChange}
          >
            {props.content.df?.map((name) => {
              <MenuItem value={name.course}>{name.course}</MenuItem>;
            })}
          </Select>
        </FormControl>
      </Box>
    </div>
  );
};

export default DropdownList;

I am trying to display dynamic data into react MUI dropdown list. However, no data is shown in the dropdown list. The props passed to the DropdownList component is from a smart component name DropdownSmart which gets the HTTP request as shown below.

import React, { useEffect, useState } from "react";

import DropdownList from "../components/dropdown/DropdownList";
import axios from "axios";

const DropdownSmart = () => {
  const [content, setContents] = useState({});

  useEffect(() => {
    axios.get("http://localhost:5000/getCourses").then((res) => {
      //   let a = res.data.df;
      //   setContents(a);
      console.log(res.data);
      setContents(res.data);
    });
  }, []);

  return <DropdownList content={content}></DropdownList>;
};

export default DropdownSmart;

The data get from the http request is in JSON format as shown below

{
  "df": [
    {
      "course": "Data Warehouse Fundamentals"
    },
    {
      "course": "Hadoop"
    },
    {
      "course": "Java"
    },
    {
      "course": "Linux"
    },
    {
      "course": "On-Job Project 1"
    },
    {
      "course": "On-Job Project 2"
    },
    {
      "course": "Python Basics"
    },
    {
      "course": "Python OOPS"
    },
    {
      "course": "Soft Skills Upskilling"
    }
  ]
}

The issue is that nothing is shown in the dropdown list. Would really appreciate it if anyone could help a newbie out here. Thanks in advance!

Answer 1

You are not returning anything from inside map which is explicit return and it returns undefined as a result

You can read this blog - Implicit & Explicit return in JS

{props.content.df?.map((name) => {
    return <MenuItem value={name.course}>{name.course}</MenuItem>; //here
 })}

or just do implicit return as below (just by removing the braces and replacing with paranthesis 😉)

{props.content.df?.map((name) => (
   <MenuItem value={name.course}>{name.course}</MenuItem>;
))}