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;

Antonio Pantano · Accepted Answer · 2021-11-22 22:27:55Z

1

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.

answered Nov 22, 2021 at 22:27

Antonio Pantano

5,0822 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ömer Ayhan · Accepted Answer · 2021-11-22 22:30:22Z

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

answered Nov 22, 2021 at 22:30

Ömer Ayhan

931 silver badge4 bronze badges

Collectives™ on Stack Overflow

Issue with trying to access array of objects from JSON data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related