Issue with trying to access array of objects from JSON data

Question

I'm trying to fetch the values of the category key inside types array and then populate the div named category_option with the same. I feel I'm missing something here to make it work the way I want it to. The error gets thrown at the line that runs the map iterator. Attached below, are the code and a snip of the JSON data I've been trying to fetch. Please note that the JSON is huge which is why I only posted a snippet. Do let me know if more of it is needed.

[
    {
        "district": "Kolkata",
        "types": [
            {
                "category": "Grievances"   //These category values are what I'm after
            },
            {
                "category": "General"
            },
            {
                "category": "Urgent"
            },
            {
                "category": "Service"
            }
        ],
        "ward_no": [
            {
                "ward": "6",
        "grievance": [
                    {}........
        ]
        },
    ]
    }
]

import React, { useState } from "react";
import './category.css';
import { IoMdArrowDropdown } from 'react-icons/io';
import { GoTriangleUp } from 'react-icons/go';
import dummyData from '../../../json_data/dummy_data.json'

const SearchBox = () => {
    const [open, setOpen] = useState(false);
    const [dropDownValue, setDropDownValue] = useState(null);

    const onSelect = (value) => {
        setDropDownValue(value);
        setOpen(!open);
    };

    return (
        <div className="box_category">
            <div className="category_caption">Categories</div>
            <div className="block_drop">
                <div className="category_dropdown">
                    <div className="category_box">
                        {dropDownValue === null ? "Enter Category" : dropDownValue}
                    </div>
                    <div className="category_dropIcon" onClick={() => setOpen(prev => !prev)}>
                        {open ? <GoTriangleUp size={"22px"} /> : <IoMdArrowDropdown size={"30px"} />}
                    </div>
                </div>
                <div className={open ? "category_option" : "category_option_block"}>
                  //This is where the error gets thrown
                    {dummyData.map((key, values) => <div className="select_options" onClick={() => onSelect(dummyData[values].types[values].category)}>
                        {dummyData[values].types[values].category}
                    </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export default SearchBox;

Answer 1

if you are only trying to map types array then you don't need to use index for that instead use this;

<div className={open ? "category_option" : "category_option_block"}>
                  //This is where the error gets thrown
                    {dummyData.types.map(({category}) => <div className="select_options" onClick={() => onSelect(category)}>
                        {category}
                    </div>
                    )}
</div>

I only edited faulty code block so you can change it with this

Answer 2

As an example you can use something like this.

{dummyData.map((item) => (
        <div>
          <h3>{item.district}</h3>
          <p>
            {item.types.map((type) => (
              <div onClick={() => onSelect(type.category)}>{type.category}</div>
            ))}
          </p>
        </div>
      ))}

Be careful that dummyData is always defined in this example. If the response comes from a remote request manage the case when it is undefined on the first load and in case of errors.