Dropdown select em ReactJS

[rhenan silverio 0]

Bem eu fiz um dropdown criando valores como Maior preço, menor preço etc... porém quando eu seleciono um dos dois ele não volta o valor e não trás o objeto que faz referencia.

 

import React, { PureComponent } from 'react'




class Dropdown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {value: '4'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }


  render() {
    const { itens, className} = this.props
    console.log(itens)
   //let x = event.target.value;
    return (
      <div className='select'>
        <select onChange={this.handleChange}  value={this.state.value}  className={className}  >
          {itens.map((item, i) =>
            <option  key={i} value={item.id}>{item.value} </option>

          )}
        </select>
      </div>
    )
  }
}
Dropdown.defaultProps = {
  className: 'select__filter'
};
export default Dropdown

import React, { PureComponent } from 'react'
import { Tab } from '../../../../components/Tabs/Tab'
import { Tabs } from '../../../../components/Tabs/Tabs'
import RestaurantCard from '../../../../components/RestaurantCard/index'
import Dropdown from '../Dropdown'
const SECTION = [
  
  {
    name: "Ver Restaurantes"
  },
  {
    name: "Ver Pratos"
  }
];

const dropdownItens = [{id: 'DISCOUNT', value: 'Melhores descontos'}, { id: 'BIGGER_PRICE', value: 'Maior Preço'}, {id: 'LOWER_PRICE', value: 'Menor Preço'}, {id: 'EVALUATION', value: 'Melhor Avaliado', selected: 'selected'}, {id: 'LOCATION', value: 'Mais Próximos'}]



class FilterTabs extends PureComponent {
  state = {
    value: '',
    id: ''
  } 

handleChange = (event) => {
    this.setState({ value: event.target.value });
    //this.setState({value: event.target.id});
  }





 render() {

    const { restaurants, size} = this.props;
    
    return (
      <section className="filter__tabs">
        <section className="container">
          <Tabs>
            {
              SECTION.map(section => (
                <Tab text={`${section.name} (${size})`} key={section.name}>
                  <section className="filter__tabs--info">
                    <span className="filter__tabs--info-text">
                      {`${size} restaurantes encontrados`}
                    </span>
                    <Dropdown  onChange={this.handleChange} itens={dropdownItens}/>
                  </section>

                  <div className="row">
                    {
                      restaurants.map(
                        restaurant => <RestaurantCard
                          key={restaurant.id}
                          extra={true}
                          data={restaurant} />
                      )
                    }
                  </div>
                </Tab>
              ))
            }
          </Tabs>
        </section>
      </section>
    )
  }
}

export default FilterTabs;