Question: I have an array of countries

```
const countries =  [{
  name: 'United States', value: 'US', currency: 'USD'
}, {
  name: 'Israle', value: 'IL', currency: 'ILS'
}, {
  name: 'United Kingdom', value: 'UK', currency: 'GBP'
}] 

```

And following code in react component 

```
handleCountryChange(val){
  console.log(val)
}

<select className="form-control input-lg" name="country" placeholder="Country" >
  { countries.map((val, index) => {   
    return(<option value={val.value} onClick={() => this.handleCountryChange(val)} key={index}>{val.name}</option>)
  })}
</select>   

```

but here my `onClick` is not being called... **I want to get all the fields of the array inside the `onClick` function**... How do I do it either with javascript or reactjs?

> 
> **And onChange gives the event and targeted value not all the fields**
> 
> 
>

Answer: 
I made it by setting `value` as a index and then get the element by indexed value from the array

```
handleCountryChange(e){
  this.setState({
    country: countries[e.target.value].value,
    currency: countries[e.target.value].currency
  })
}

<select className="form-control input-lg" name="country" onChange={(e) => this.handleCountryChange(e)}>
  { countries.map((val, index) => {   
    return(<option value={index} key={index}>{val.name}</option>)
  })}
</select>

```
Put the `onChange` handler on the `select` element instead.

**Example**

```
class App extends React.Component {
  state = {
    countries: [
      {
        name: "United States",
        value: "US",
        currency: "USD"
      },
      {
        name: "Israle",
        value: "IL",
        currency: "ILS"
      },
      {
        name: "United Kingdom",
        value: "UK",
        currency: "GBP"
      }
    ]
  };

  handleCountryChange = event => {
    const { value } = event.target;
    const option = this.state.countries.find(
      country => country.value === value
    );
    console.log(option);
  };

  render() {
    const { countries } = this.state;

    return (
      <select
        className="form-control input-lg"
        name="country"
        placeholder="Country"
        onChange={this.handleCountryChange}
      >
        {countries.map((val, index) => {
          return (
            <option value={val.value} key={index}>
              {val.name}
            </option>
          );
        })}
      </select>
    );
  }
}

```