iterate and render data from array and object in React.JS with nested object

Question

It is Category's Filter component develop

Need To Render Data from Nested Array and Render it with React Js

I Try To Do it As Below it is Showing but it is Rendering Nothing

Focus part is render part only

var selectedCategory = {filter_name: "Category"}

Array With Object is :

 var selectedOptions = [ { filter_name: "Category", attribute_code: "category_id", attribute_input_type: "", filter_options: [ { label: "Brands", value: "465", count: "10", }, { label: "Perfumes", value: "789", count: "1425", }, ], selectedOptions: ["465"], filter_min_price: null, filter_max_price: null, }, { filter_name: "Price", attribute_code: "price", attribute_input_type: "price", filter_options: [ { label: "BHD 10,000 - BHD 0", value: "0.00-10000-0", count: "1", }, { label: "BHD 0 - BHD 10,000", value: "0.00-10000", count: "5953", }, ], filter_min_price: "BHD -12", filter_max_price: "BHD 24481", selectedOptions: ["0.00-10000-0"], }, ];

I have Render It with this way by using too many map and i don't know is there any easy way to do it or not, code is given below

<div className="product-catres"> {selectedOptions && selectedOptions.length > 0 && selectedOptions.map((option) => { { option.filter_name === selectedCategory.filter_name && option.filter_options.map((option) => { return ( <div key={option.value} className="pcoption"> <div className="form-check"> <label className="form-check-label"> <input className="form-check-input" type="checkbox" onChange={() => handleSelectedFilterOptions(option.value)} checked={ selectedOptions && selectedOptions.includes(option.value) ? true : false } /> {option.label} </label> </div> </div> ); }); } })} </div>;

Thanks in Advance For Helping Me out

kuba · Accepted Answer · 2022-10-21 10:18:42Z

Before rendering you can get object you want to render.

const selectedOption = selectedOptions.find(item => item.filter_name === selectedCategory)

And then all you need to do is to render that one selected object.

<div className="product-catres"> { selectedOption?.filter_options?.map((option) => { return ( <div key={option.value} className="pcoption"> <div className="form-check"> <label className="form-check-label"> <input className="form-check-input" type="checkbox" onChange={() => handleSelectedFilterOptions(option.value)} checked={ selectedOption.selectedOptions && selectedOption.selectedOptions.includes(option.value) ? true : false } /> {option.label} </label> </div> </div> ); })}

Zein · Accepted Answer · 2022-10-21 10:20:21Z

{selectedOptions && selectedOptions.length > 0 && selectedOptions.map((option) => option.filter_name === selectedCategory.filter_name && option.filter_options.map((option) => { return ( <div key={option.value} className="pcoption"> <div className="form-check"> <label className="form-check-label"> <input className="form-check-input" type="checkbox" onChange={() => handleSelectedFilterOptions(option.value)} checked={ selectedOptions && selectedOptions.includes(option.value) ? true : false } /> {option.label} </label> </div> </div> ); }) )}

well, i also did same thing or please help me to find where should i have to add it

Collectives™ on Stack Overflow

iterate and render data from array and object in React.JS with nested object

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related