why i can't see any options of categories in select menu?

Question

i am using this code to have the categories form the database to the select menu, but it is not working.

<select
        onChange={handleChange("category")}
        className="form-control"
        placeholder="Category"
      >
        <option>Select</option>
        {categories &&
          categories.map((cate, index) => {
            <option key={index} value={cate._id}>
              {cate.name}
            </option>
          })}
      </select>

i have all the categories from the database in the 'categories' array, i have tested it in console but i cannot see in select options

Answer 1

You have to return JSX from the function you passed into categories.map . Since you are not returning anything, by default any javascript function will return undefined . That means categories.map is producing an array of undefined .

{categories &&
   categories.map((cate, index) => {
     return (
       <option key={index} value={cate._id}>
         {cate.name}
       </option>
     );
   }
)}

You can also implicitly return the JSX

{categories &&
   categories.map((cate, index) => (
       <option key={index} value={cate._id}>
         {cate.name}
       </option>
     )
)}