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;
CodePudding user response:
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.
CodePudding user response:
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