This should be straitforward thing but I cannot get to work even i tried different apporaches and also refered the stackoverflow existing solutions. I'm new to frontend work. I have react app (using typescript) and I'm using antd componets. I have following object

class User {
     locations: Location[];
}
class Location {
      name:string;
}

I want to render location names in select options. I tried

      <Select
            id="location"
            placeholder="Location"
          >
            {user.locations.map((loc) => {
              console.log('got -> '   loc.name);
              <Option value={loc.name}>{loc.name}</Option>;
            })}
          </Select>

I get the exepected console log but nothing is rendered ( empty options list ) and there is no error. How to get this working

CodePudding user response：

You aren't returning anything from your map function, so it's just running and returning void. Since no component is returned, none is rendered. If you have multiple lines of code in an arrow function you have to use an explicit return. To quote MDN, (arrow functions do not magically guess what or when you want to "return")

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions