javascript - How to handle dropouts in React JS

Question

here i am pasting my code at below, please guide me how i can click on the link from dropouts..

let showWomenCategoryMenuDropout = false;
class WomenCategoryMenu extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showWomenCategoryMenuDropout: false
    };

    this.openWomenCategoryMenuDropout = this.openWomenCategoryMenuDropout.bind(
      this
    );
    this.closeWomenCategoryMenuDropout = this.closeWomenCategoryMenuDropout.bind(
      this
    );
  }

  openWomenCategoryMenuDropout() {
    this.setState({
      showWomenCategoryMenuDropout: true
    });
  }

  closeWomenCategoryMenuDropout() {
    this.setState({
      showWomenCategoryMenuDropout: false
    });
  }

  render() {
    return (
      <div>
        <div
          className={classnames(style.header_category_menu_container)}
          onMouseOut={this.closeWomenCategoryMenuDropout}
          onMouseEnter={this.openWomenCategoryMenuDropout}>
          <span><a href="">Women</a></span>
        </div>
        <div>
          <SignIn
            type="dropout"
            open={this.state.showWomenCategoryMenuDropout}
            onMouseOut={this.closeWomenCategoryMenuDropout}
            onMouseEnter={this.openWomenCategoryMenuDropout}>
            <div className={classnames(style.cartegory_wrapper)}>
              <CategoryGrid>
                {data.map((ele, index) => (
                  <div
                    className={classnames(style.cartegory_menu)}
                    key={"Key-" + index}>
                    <h3 className={classnames(style.cartegory_menu_title)}>
                      {ele.categorytitle}
                    </h3>
                    <ul>
                      {Array.isArray(ele.category) &&
                        ele.category.map((d, i) => (
                          <li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>
                        ))}
                      {ele.imagePath && <img src={ele.imagePath} />}
                    </ul>
                  </div>
                ))}
              </CategoryGrid>
            </div>
          </SignIn>
        </div>
      </div>
    );
  }
}

also please find the JASON data at below...

var data = [
  {
    categorytitle: "Shoes",
    category: [
      {
        Category1: "Boots"
      },
      {
        Category2: "Sneakers"
      },
      {
        Category3: "Flats"
      },
      {
        Category4: "Booties"
      },
      {
        Category5: "Mules"
      },
      {
        Category6: "Heels/Pumps"
      },
      {
        Category7: "Clogs"
      },
      {
        Category8: "Slippers"
      },
      {
        Category9: "Sandals"
      },
      {
        Category10: "Sale"
      },
      {
        Category11: "Shop All"
      }
    ]
  },
  {
    categorytitle: "Activities",
    category: [
      {
        Category1: "Comfort Shop"
      },
      {
        Category2: "Run Shop"
      },
      {
        Category3: "Trend Guide"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Casual"
      },
      {
        Category6: "Dress"
      },
      {
        Category7: "Outdoor"
      },
      {
        Category8: "Walking"
      },
      {
        Category9: "Foot Health & Wellness"
      },
      {
        Category10: "Narrow Shoes"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Clothing & More",
    category: [
      {
        Category1: "Handbags/Purses"
      },
      {
        Category2: "Active & Yoga"
      },
      {
        Category3: "Coats & Jackets"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Dresses"
      },
      {
        Category6: "Tops"
      },
      {
        Category7: "Sweaters"
      },
      {
        Category8: "Socks"
      },
      {
        Category9: "Sunglasses"
      },
      {
        Category10: "Rain Gear"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Top Brands",
    category: [
      {
        Category1: "Sam Edelman"
      },
      {
        Category2: "Clarks"
      },
      {
        Category3: "Dr Martens"
      },
      {
        Category4: "Lucky Brand"
      },
      {
        Category5: "New Balance"
      },
      {
        Category6: "Skechers"
      },
      {
        Category7: "Sperry Top-Sider"
      },
      {
        Category8: "Sorel"
      },
      {
        Category9: "TOMS"
      },
      {
        Category10: "UGG"
      },
      {
        Category11: "Vionic"
      }
    ]
  },
  {
    targetUrl: "/",
    imagePath:
      "src/image1",
    title: "WORK SHOP"
  }
];

this above is my JSON data, here once mouse hover dropuout is showing correctly but once i am going to click any link from dropout the dropouts itself is closing.

Answer 1

This problem got solved ..here just need to replace from onMouseOut to onMouseLeave.