Accepted answer

Please find the updated code that helps to solve your issue:

import ReactDOM from "react-dom";

import "./styles.css";
import React, { Component } from "react";

class OptionsMenu extends Component {
  constructor() {
    this.dropdownBoxRef = React.createRef();

  handleClickOutside = event => {
    if (this.dropdownBoxRef && !this.dropdownBoxRef.current.contains( {

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);

  render() {
    const options = ["a", "b", "c"].map(option => (
      <li className="OptionsList-Element">
        <div className="OptionsList-ElementIcon">Icon</div>
    return (
      <div ref={this.dropdownBoxRef} styles={this.props.styles}>
        <ul className="OptionsList">{options}</ul>

export default OptionsMenu;

const rootElement = document.getElementById("root");
ReactDOM.render(<OptionsMenu />, rootElement);

Note: this.dropdownBoxRef.current.contains( line is the game changer.


Refs have things stored inside a property called current. So in order to actually reach your element you'll have to do this.dropdownBoxRef.current and call .contains on that.

Related Query

More Query from same tag