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

CodePudding user response：

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>
    );
})}

CodePudding user response：

{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>
              );
            })
        )}