[Solved]-OnChange event using React JS for drop down-Reactjs

var myselect = react.createclass({
getinitialstate: function() {
 

var myselect = react.createclass({
 getinitialstate: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     event.persist(); //the main line that will set the value
     this.setstate({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onchange={this.change.bind(this)} value={this.state.value}>
              <option value="select">select</option>
              <option value="java">java</option>
              <option value="c++">c++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
react.render(<myselect />, document.body); 

<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>

thank you felix kling, but his answer need a little change:

var myselect = react.createclass({
 getinitialstate: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setstate({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onchange={this.change.bind(this)} value={this.state.value}>
              <option value="select">select</option>
              <option value="java">java</option>
              <option value="c++">c++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
react.render(<myselect />, document.body); 

i'll add this here, in case it helps someone because this was the solution that helped me.

this is to get the selected index. not for the value. (worked for me because my options list was a list of numbers)

const [selectedoption, setselectedoption] = usestate(0)
<select onchange={event => setselectedoption(event.target.options.selectedindex)}>

if you are using select as inline to other component, then you can also use like given below.

<select onchange={(val) => this.handleperiodchange(val.target.value)} classname="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="today">today</option>
    <option value="this_week" >this week</option>
    <option value="this_month">this month</option>
    <option value="this_year">this year</option>
    <option selected value="last_available_day">last availabe nav day</option>
</select>

and on the component where select is used, define the function to handle onchange like below:

handleperiodchange(selval) {
    this.props.handleperiodchange(selval);
}

  handlechange(value, selectoptionsetter) => {
     selectoptionsetter(value)
     // handle other stuff like persisting to store etc
   }

  const dropdown = (props) => {
  const { options } = props;
  const [selectedoption, setselectedoption] = usestate(options[0].value);
  return (
      <select
        value={selectedoption}
        onchange={e => handlechange(e.target.value, setselectedoption)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

import react, { purecomponent, fragment } from 'react';
import reactdom from 'react-dom';

class select extends purecomponent {
  state = {
    options: [
      {
        name: 'select…',
        value: null,
      },
      {
        name: 'a',
        value: 'a',
      },
      {
        name: 'b',
        value: 'b',
      },
      {
        name: 'c',
        value: 'c',
      },
    ],
    value: '?',
  };

  handlechange = (event) => {
    this.setstate({ value: event.target.value });
  };

  render() {
    const { options, value } = this.state;

    return (
      <fragment>
        <select onchange={this.handlechange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>favorite letter: {value}</h1>
      </fragment>
    );
  }
}

reactdom.render(<select />, window.document.body);

react hooks (16.8+):

const dropdown = ({
  options
}) => {
  const [selectedoption, setselectedoption] = usestate(options[0].value);
  return (
      <select
        value={selectedoption}
        onchange={e => setselectedoption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};