price.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';

export default class Price extends Component {
    state = {open : false};

    handleClick = (e) => {
        let value  = false;

        if(ReactDom.findDOMNode(this).contains(e.target)) {
            value = true;
        }

        this.setState((prevState) => ({open: value}));
    }

    componentDidMount = () => {
        window.addEventListener('click', this.handleClick, false);
    }

    componentWillUnmount() {
        // make sure you remove the listener when the component is destroyed
        document.removeEventListener('click', this.handleClick, false);
    }

  render() {
    return (
        <li className={'dropdown ' + (this.state.open == true ? 'open' : '')} onClick={this.handleClick}>
          <a>
            Price range
            <span className="caret"></span>
          </a>
          <div className="dropdown-menu">
            Price range filter
          </div>
        </li>
    );
  }

}

Room.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';

export default class Room extends Component {
    state = {open : false};

    handleClick = (e) => {
        let value  = false;

        if(ReactDom.findDOMNode(this).contains(e.target)) {
            value = true;
        }

        this.setState((prevState) => ({open: value}));
    };

    componentDidMount = () => {
        window.addEventListener('click', this.handleClick, false);
    };

    componentWillUnmount() {
        // make sure you remove the listener when the component is destroyed
        document.removeEventListener('click', this.handleClick, false);
    };

  render() {
    return (
        <li className={'dropdown ' + (this.state.open == true ? 'open' : '')} onClick={this.handleClick}>
            <a>
                Room Type
                <span className="caret"></span>
            </a>
            <div className="dropdown-menu">
              Room type filter
            </div>
        </li>
    );
  }

}

test.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';

import Room from './components/Room';
import Price from './components/Price';

class Navheader extends Component {


   handleClick = (e) => {

   };

  render() {
    return (
        <ul className="nav navbar-nav navbar-left">
          <Room />
          <Price />
        </ul>
    );
  }

}


ReactDom.render(<Navheader />, document.getElementById('third-layer'));

import React, { Component } from 'react';
import ReactDom from 'react-dom';

export default class Price extends Component {
state = {open : false}

handleClick = (e) => {
  this.setState({ open: !this.state.open })
}

render() {
const { state } = this
const { open } = state

return (
    <li className={'dropdown ' + (this.state.open == true ? 'open' : '')} onClick={this.handleClick}>
      <a>
        Price range
        <span className="caret"></span>
      </a>
      { open ? 
          <div className="dropdown-menu">
            Price range filter
          </div> : null
      }
    </li>
);

}

}