React Material-UI Select using an array of objects as the source

Question

Hoping I can get some help. I'm currently following a tutorial that is using React Material-UI, specifically to do with a simple Select drop-down.

They are using the following json dataset object snippet for their code that looks like this:

{
  "AF": "Afghanistan",
  "AL": "Albania",
  "DZ": "Algeria",
  "AS": "American Samoa",
  "AD": "Andorra",
  "AO": "Angola",
  "AI": "Anguilla"
}

and the React code they use to build the select is as follows, where options here is the above json dataset:

  return (
    <TextField>
      {Object.keys(options).map((item, pos) => {
        return (
          <MenuItem key={pos} value={item}>
            {options[item]}
          </MenuItem>
        )
      })}
    </TextField>
  );

Now I am trying to build something similar to the above but my dataset is actually an array of objects, i.e.:

[
    {
        "job_id": 1,
        "job_name": "Engineer"
    },
    {
        "job_id": 2,
        "job_name": "Scientist"
    },
    {
        "job_id": 3,
        "job_name": "Teacher"
    }
]

My question is, how can I achieve the above React code to construct my React Material UI Select but instead of using an object, I would like to use my array of objects where the name shown in the select drop-down is job_name and the value return is job_id?

I have tried the following, but nothing is returned:

{options.map(option => {
          return (
            <MenuItem key={option.value} value={option.value}>
              {option.key}
            </MenuItem>
          )
})}

Added: In addition to the above, what is the best way of checking between the first dataset (object) and my data set - array of objects and then using this check to distinguish between the two methods of displaying the data within the correct Material-UI Select code?

Answer 1

You need to access the item options differently since key and value are not set in the objects within the array. The possible options are job_id and job_name.

So try this:

{options.map(option => {
          return (
            <MenuItem key={option.job_id} value={option.job_id}>
              {option.job_name}
            </MenuItem>
          )
})}

Map will be called on every item so that option here is one of the elements in your array.

Update: to distinguish if the object is an array or not you could use Array.isArray:

{(Array.isArray(options) ? options.map(({job_id, job_name})=> ([job_id, job_name])) : Object.entries(options)).map(([key,value])=> {
          return (
            <MenuItem key={key} value={key}>
              {value}
            </MenuItem>
          )
})}

This would work but maybe should be done separately to keep the jsx lean and avoid overloading the render function.