Question 109806 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How to create an Option Group in Antd Design?

I’m trying to implement a categories input with this data returned from my DB

[
  {
    _id: '63e59f91bd2a21368188ff4b',
    title: 'Uncategorized',
    slug: 'uncategorized',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:36:17.704Z',
    updatedAt: '2023-02-10T01:36:17.704Z',
  },
  {
    _id: '63e5984028745af5bad2c015',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'YTDownloader',
    slug: 'ytdownloader',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:05:04.919Z',
    updatedAt: '2023-02-10T01:05:04.919Z',
  },
  {
    _id: '63e597c3786719dd4bb2d387',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'Song Finder',
    slug: 'song-finder',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:02:59.742Z',
    updatedAt: '2023-02-10T01:02:59.742Z',
  },
]

What I’m trying is to create the example given in the documentation since my categories are pretty much ‘parents’ or ‘childrens’ and don’t want to have them unorganized.

So far this is what I’ve been trying but to not success:

<Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    })
  }}
  value={category}
  options={[
    categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
      },
    ]),
  ]}
/>

This returns literally nothing, not even an error. What I was expecting is the following:

  <Select
    defaultValue={category}
    onChange={(e) => {
      setObjectData({
        ...objectData,
        category: e,
      })
    }}
    value={category}
    options={[
      {
        label: 'Projects',
        options: [
          {
            label: 'YTDownloader',
            value: '63e5984028745af5bad2c015',
          },
          {
            label: 'Song Finder',
            value: '63e597c3786719dd4bb2d387',
          },
        ],
      },
      {
        label: 'Uncategorized',
        value: '63e59f91bd2a21368188ff4b'
        ],
      },
    ]}
  />

Has anyone done something like this before? It will be great if you guys can help me solve this little issue that’s been giving a headache for the last 2 hours, LOL

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up doing this:

    <Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    })
  }}
  value={category}
>
  {categories
    .filter((c) => c.parentCategory === undefined)
    .map((category, index) => (
      <Select.OptGroup key={category._id} label={category.title}>
        {categories
          .filter((c) => c.parentCategory?._id === category._id)
          .map((childC, index) => (
            <Select.Option key={childC._id} value={childC._id}>
              {childC.title}
            </Select.Option>
          ))}
      </Select.OptGroup>
    ))}
</Select>

    I pretty much had to do two loops instead of one but hey!. This gets the job done, I guess?


  2. 0

    My guess would be you have only passed objects to options that only have a label and no value. This is speculation, but it’s possible nothing is rendered in the dropdown if there is no corresponding value to each label.

    The label, which is what the user sees for each option, isn’t necessarily its underlying value.

    Keep in mind the value is ultimately the thing that will be passed to onChange, so to only have a label with no value could explain why it just does nothing — because a valid option must have a value.

    Map each option such that its value represents that option uniquely:

        categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
        value: c._Id
      },
    ]),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search