I try to duplicate <MenuItem /> as much as data.
So I wrote this code:

            <FormControl fullWidth>
              <InputLabel>JobArea</InputLabel>
              <Select
                autoFocus
                label="JobArea"
                sx={{
                  width: "70%",
                }}
              >
                {props.jobArea.map((jobArea: any) => {
                  <MenuItem key={jobArea.id} value={(jobArea || {}).name || ""}>
                    {(jobArea || {}).name || ""}
                  </MenuItem>;
                })}
              </Select>
            </FormControl>

But the code was nothing response.

It seems like <MenuItem> wasn't read on program.
When I use console.log like this

                {props.jobArea.map((jobArea: any) => {
                  {
                    console.log((jobArea || {}).name || "");
                  }
                  <MenuItem key={jobArea.id} value={(jobArea || {}).name || ""}>
                    {(jobArea || {}).name || ""}
                  </MenuItem>;
                })}

Outcome was:

So I guess map method is fine but problem is <MenuItem>.
From Github they use map method like me.

https://github.com/mui/material-ui/issues/18494#issuecomment-680500105

What is deference between my code and others.
Please help me.
Thank you.

CodePudding user response：

Your lambda passed to map has a statement body since it’s enclosed in curly braces. You need to return the menu item or use an expression lambda without curly braces.