Cascading react components

Question

I am trying to display the cascading drop downs. That is data in subcategory would be displayed based on the category selection. Trying to handle the scenario where the category does not have the subcategory that is it is null. I want to hide the subcategory.

Data :

  const categoryData = [
    {
      categoryName: 'Sandwitches',
      subCategory: ['Veg', 'Non veg']
    },
    {
      categoryName: 'Beverages',
      subCategory: ['Hot', 'Cold', 'Smoothie']
    },
    {
      categoryName: 'Pasta',
      subCategory: null
    },

    {
      categoryName: 'Cakes',
      subCategory: ['Mousse Cake', 'Naked Cake', 'Wedding Cake']
    },
    {
      categoryName: 'Gelato',
      subCategory: ['Hot', 'Cold', 'Smoothie']
    }
  ];

<InputTextContainer>
          <InputLabel>Category</InputLabel>
          <InputSelect
            value={category}
            name="category"
            onChange={onChange('category')}
          >
            {categoryData.map((category, index) => {
              return <InputOption>{category.categoryName}</InputOption>;
            })}
          </InputSelect>
        </InputTextContainer>
        {
          <InputTextContainer>
            <InputLabel>Sub Category</InputLabel>
            <InputSelect
              value={subCategory}
              name="subCategory"
              onChange={onChange('subCategory')}
            >
              {categoryData
                .filter(selectedCategory => {
                  return selectedCategory.categoryName === category;
                })
                .map((category, index) =>
                  category.subCategory.map(subcategory => {
                    {
                      return <InputOption>{subcategory}</InputOption>;
                    }
                  })
                )}
            </InputSelect>
          </InputTextContainer>
        }

Answer 1

Outside of your return statement, you can declare a variable selectedCategory

const selectedCategory = categoryData.filter((c) => {
  return c.categoryName === category;
});

Then you can conditionally render the component

{
  selectedCategory.length > 0 && selectedCategory[0].subCategory && (
    <InputTextContainer>
      <InputLabel>Sub Category</InputLabel>
      <InputSelect
        value={subCategory}
        name="subCategory"
        onChange={onChange("subCategory")}
      >
        {selectedCategory.map((category, index) =>
          category.subCategory.map((subcategory) => {
            {
              return <InputOption>{subcategory}</InputOption>;
            }
          })
        )}
      </InputSelect>
    </InputTextContainer>
  );
}

Also if you're sure that category names are unique find might be a better choice than filter here

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.