Пытаетесь получить значение идентификатора из выпадающего списка имен, используя Form.Select с Semantic-UI-React?

Здесь много чего происходит, поэтому позвольте мне попытаться разобрать это по частям в комментариях к коду. Дайте мне знать, если что-то не ясно.

class Navigation extends Component {
  state = {
    modalOpen: false,
    title: "",
    body: "",
    animal: "",
    geotag: false,
    animals: []
  };

  componentDidMount() {
    fetch("http://localhost:9000/api/v1/animals")
      .then(r => r.json())
      .then(animals => {
        this.setState({ animals: animals });
      });
  }

  /**
   * When a user selects an option in the dropdown, the following will happen:
   *  1. this.handlechange gets called
   *  2. Component's state gets updated to look like:
   *      {
   *        ...state,
   *        "Animal": <id of animal selected>
   *      }
   * Side note: you will have to access this "Animal" value through this.state.Animal
   * where the uppercase 'A' is very important. This is really prone to typos and not
   * recommended. To fix this I would change your <Form.Select> to have a lowercase
   * name attribute.
   */
  handlechange = (event, { name, value }) => {
    // We need to use { name, value } instead of event.target.name, etc
    // due to how Semantic UI handles events. More info here:
    // https://github.com/Semantic-Org/Semantic-UI-React/issues/638
    this.setState({ [name]: value });
  };

  submitForm = event => {
    this.props.postSighting(this.state.title, this.state.body);

    // Recall from above that this.state.Animal contains the animal id currently selected
    // so we can access it directly with this.state.Animal
    const animalId = this.state.Animal;

    // do stuff with animalId...
  };

  /**
   * If this is called, it will destroy the array of animals you have in your state and replace it with a gname
   * from one of the animals. You probably don't want this to happen.
   * Not sure what you are trying to do here, what do you use the return value for?
   * Also, this will return an array filled with 'undefined' since you don't return anything in the animals.map callback.
   */
  selectAnimal = () => {
    const mappedAnimals = this.state.animals.map(animal => {
      this.setState({ animal: animal.gname });
    });
    return mappedAnimals;
  };

  render() {
    return (
      //.......SKIP TO THE CODE THAT MATTERS

      <Form.Select
        label = "Animal"
        name = "Animal" // this is the name that gets passed to 'handlechange' as event.target.name
        onChange = {this.handlechange}
        // selection: this isn't a valid prop for Form.Select and will be ignored regardless of value
        width = {8}
        // value: we don't need to worry about this since Form.Select will handle it
        compact
        options = {this.state.animals.map(animal => ({
          // return: was this a typo?
          name: animal.id,
          key: animal.id,
          value: animal.id, // This is the value that gets passed to 'handlechange' as event.target.value
          text: animal.gname
        }))}
      />
    );
  }
}

После долгих исследований и некоторой помощи от @miyu оказалось, что это работает:

  <Form.Select
            fluid
            onChange = {this.handleChangeEvent}
              placeholder='select animal'
              label = "Animal"
              name = "animal"

               width = {8}
               selection
               options = {this.state.animals.map(animal => ({
                 name: animal.gname,
                 key: animal.id,
                 value: animal.id,
                 text: animal.gname
               }))}
            />

и ваш handleChangeEvent должен выглядеть так:

handleChangeEvent = (e, { name, value }) => this.setState({ [name]: value })