Filtering react product page

1

I am having an issue with filtering the product page for one of my websites. I was able to filter the page perfectly before making an ajax call with an actual database.

I can only paster when I separte the website. I apologize but without these two pages, I cannot explain the issue well.

Working page: codesandbox. io / s/ cranky-meadow-35z94

Non working page: codesandbox. io / s/ pensive-browser-vylk2

This is my form submit function:

  handleFormSubmit = event => {
    event.preventDefault();

    const selectedSizes = [...this.selectedCheckboxes];

    let shallowCopy = [...this.state.products];

    this.setState({
      filteredProducts: shallowCopy
        .filter(product =>
          selectedSizes.every(size =>
            product.stock.some(s => s.stock > 0 && s.size === size)
          )
        )
        .filter(prod => {
          return prod.gender.some(item => {
            return item[this.selectedGender] === false ? null : prod;
          });
        })
        .filter(brands => {
          return brands.brand.includes(this.state.activeBrand);
        })
    });
  };

Just for context, I created a backend in which I am making the following ajax call:

componentDidMount () {
         axios
           .get('/api/v1/products')
           .then((res) => {
               let products = res.data.data.data;
                this.setState({
                    products,
                     filteredProducts: products,
                     isLoading: false
               })
            })
            .catch(function (error) {
               console.log(error);
         })
   }

I believe I may be having an issue with the lifecycle method that I am using to mount the component.

Before the ajax call I was using the following to render the data:

const Data = [
{
title: “Scotts”,
alternative_title: “Jeremy Scotts Pandabear”,
routeName: “Scotts”,
gender: [
{
male: true,
female: false
}
],
brand: “Adidas”,
price: 40,
stock: [
{ size: 3, stock: 0 },
{ size: 3.5, stock: 10 },
{ size: 4, stock: 0 },
{ size: 4.5, stock: 330 },
{ size: 5, stock: 5 },
{ size: 5.5, stock: 555 },
{ size: 6, stock: 6 },
{ size: 6.5, stock: 63 },
{ size: 7, stock: 0 },
{ size: 7.5, stock: 100 },
{ size: 8, stock: 33 },
{ size: 8.5, stock: 333 },
{ size: 9, stock: 222 },
{ size: 9.5, stock: 99 },
{ size: 10, stock: 99 },
{ size: 10.5, stock: 77 },
{ size: 11, stock: 55 }
],
description:
“The Womens Air Jordan 1 Satin Black Toe” is a special construction of the original colorway of the Jordan 1 with satin paneling on the heel. Following the same blueprint of the Satin Shattered Backboard” colorway that was also a women’s exclusive, this Satin Black Toe” edition features a black and white leather upper with red satin at the heel. The Air Jordan wings” logo on the ankle is presented in a metal medallion to complete the premium look. The Women’s Air Jordan 1 Satin Black Toe” released on August 17, 2019 in limited quantities.”,
image:
“”

If there is any more information that I can put here that might be helpful please let me know.