React Dropdown

index.html

<div id="root"></div>

react-dropdown.markdown

React Dropdown

A Pen by Aaron Goldsmith on CodePen.

License.

script.babel

const values = ['Default',25,26,261,469,1,2,3,4,5,6,7,8]
const Row = (props) => {
  return <li onClick={props.clickHandler} className="rowItem"> {props.data} </li>
}

class Dropdown extends React.Component {

  toggleDropdown(){
    const temp = this.state.open;
    this.setState({open: !temp});
  }
  selectItem(item){   
        const list_item = item['target'];
        // console.log(list_item);
          console.log(l1);
      // this.setState({selectedVal:item['target'].split(ind1,ind2)});
  }
  
  constructor(props)
  {
      super(props);
      this.state = {
        open: false,
        selectedVal: "Default"
      }
     this.toggleDropdown = this.toggleDropdown.bind(this)
     this.selectItem = this.selectItem.bind(this)
  }
  render() {
    
    return (
      <div>
          <ul>
            <li onClick={this.toggleDropdown} className="selected">{this.state.selectedVal}</li>
            {
              this.state.open?
                values.map(val => 
                <Row clickHandler={this.selectItem} data={val}></Row>
                ):
                <span></span>
            }
         </ul>
      </div>
        
  
        );
    
  }
}

ReactDOM.render(<Dropdown options={ [] } />, document.getElementById('root'))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.rowItem{
  padding: 2px;
  margin: -1px 2px;
  border: 1px solid #333;
}
.selected{
  padding: 2px;
  margin: 0px 2px;
}
.rowItem:hover{
  color: white;
  font-weight: bold;
  background: #119AAA;
}
.selected{
  border: 1px solid #119AAA;
}
.selected:hover{
  background:initial;
}
ul{
    list-style-type:none;
  width: 200px;
  overflow-y:scroll;
  margin-bottom: 20px;
  height: 150px;
}