html - reactjs - Dropdown select with 2 fields

Question

I'm trying to code a select component with 2 fields, similar to what http://www.apartments.com has. I've looked into antd, bootstrap, semantic etc but did not see a similar component, so I was wondering if anyone knows of a package/library to accomplish this. Or is it my best bet to code it as a dropdown with 2 tabs, each tab as an input field?

Answer 1

Not sure if this is what you are looking for, but you could build your own custom select component like this:

class Select extends React.Component {
  
  state = {
    activeMenu: 'min',
    open: true,
    min: '',
    max: ''
  };
  
  toggleMenu = e => {
    this.setState({
      activeMenu: e.target.name
    });
  };
  
  toggleOpen = () => {
    this.setState( prevState => {
      return { open: !prevState.open }
    });
  };
  
  getMenuOptions = () => {
    let options = [];
    switch(this.state.activeMenu){
      case 'min': {
        options = ['$1000','$2000','$3000','$4000','No Min'];
        break;
      }
      case 'max': {
        options = ['$1000','$2000','$3000','$4000','No Max'];
        break;
      }
    }
    return options.map( (option, i) => {
      return (
        <li key={i} onClick={this.handleSelect.bind(this, this.state.activeMenu, option)}>
          {option}
        </li>
      )
    });
  };
  
  handleSelect = (menu, value) => {
    this.setState({
      [menu]: value
    });
  };

  render() {
    const { open, min, max, activeMenu } = this.state;
    const menuOptions = this.getMenuOptions();
    return(
      <div className="select">
        <span onClick={this.toggleOpen} >Rent Range</span>
        {open && (
          <div>
            <div>
              <input type="text" name="min" value={min} onFocus={this.toggleMenu} autoFocus />
              -
              <input type="text" name="max" value={max} onFocus={this.toggleMenu} />
            </div>
            <div>
              <ul className={activeMenu}>
                {menuOptions}
              </ul>
            </div>
          </div>
        )}
      </div>
    )
  }
}

ReactDOM.render(<Select/>,document.getElementById('root'));

span {
  display: block;
  cursor: pointer;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
}
li:hover {
  cursor: pointer;
}
ul.max {
  float: right;
}
.select {
  width: 300px;
  border: 1px solid #222;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>