I am fairly new to react JS and I've implemented 2 dropdown boxes whose options are displayed by hitting an API. I want to obtain the selected value but I am getting the following error:

> 
> TypeError: Cannot read property 'value' of undefined.
> 
> 
> 

As of now I just tried to obtain the value from one dropdown.

This is my code,

```
import React from 'react';
import Select from 'react-select';
import './Search.css';

class SearchForm extends React.Component {
constructor(props){
  super(props);
this.state={
filtered :[],
values1 :[],
values2 :[],
selectedCategory:''
}
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
  try{
  this.setState({selectedCategory: event.target.value});
} catch (err) {
  console.error('err', err);}}

componentDidMount() {
  this.fetchData1()
  this.fetchData2()
}

fetchData1 = async () => {
  await fetch('/category/all')
    .then(res => res.json())
    .then(res =>
      this.setState({
        values1: res,
      }),
    )
    .catch(error => console.log(error))
}

fetchData2 = async () => {
  await fetch('/loc/all')
    .then(res => res.json())
    .then(res =>
      this.setState({
        values2: res,
      }),
    )
    .catch(error => console.log(error))
}

async handleSubmit(event){
      event.preventDefault();
try{

const url ='/jobs/all/'
const Response = await fetch((url),{
    method: `GET`,
    mode: 'cors',
        headers: { 
            'Accept': 'application/json'
          }});

const filtered = [];

const res = await Response.json();

const Location = this.menu2.value
const Category = this.menu1.value

console.log(Location)
console.log(Category)

Object.keys( res ).forEach( function( key ) {
    if( res[key].location === Location && res[key].category === Category ) {
        filtered[key] = res[key];}
});
this.setState({filtered})
console.log(this.state.filtered)
        }
 catch (err) {
    console.error('err', err);}
    };
    render() {
      let option1 = []
      if (this.state.values1) {
        this.state.values1.forEach(eachCategory => {
          let Category = {}
          Category.value = eachCategory.id
          Category.label = eachCategory.category
          option1.push(Category)
        })
      }
      console.log(option1)
      let option2 = []
      if (this.state.values2) {
        this.state.values2.forEach(eachLocation => {
          let Location = {}
          Location.value = eachLocation.id
          Location.label = eachLocation.location
          option2.push(Location)
        })
      }
      console.log(option2)
      return (
        <div>
        <form action="/search" onSubmit={this.handleSubmit.bind(this)}>
          <Select options={option1} value={this.state.selectedCategory} placeholder='Category' onChange={this.handleChange}>
          </Select>
          <Select options={option2} placeholder='Location'/>
          <button>Find</button>
        </form>
        {this.state.filtered.map((data)=>{
          //  return <div>{data.location}</div>  // you can render here list items
          return (
          <div className="flex-container">
          <div key={data.id}>
          <div>Job Title: {data.category}</div>
          <div>Location: {data.location}</div>
          <div>Position: {data.position}</div>
          <div>Duration: {data.duration}</div>
          <div>Skills Required: {data.skills_req}</div>
          <div>Apply By: {data.apply_by}</div>
          <div>Starting Date: {data.starting_date}</div>
          <div>Stipend: {data.stipend}</div>
          <div>About Work: {data.about_work}</div>
          <div>Perks: {data.perks}</div>
          </div>
          </div>)

        })}
        </div>
      );
    }
  }

export default SearchForm;

```

Please point out where am I wrong.