score:1

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

score:1

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>
    );
  }
}

score:2

You should put the handler on select element. Not on individual option.

Try the following..

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

Related Query

More Query from same tag