TypeError: Cannot read property 'value' of undefined React, Ant select

Question

I cannot get React Ant Form Select value as it is undefined. I have tried updating state and anything but nothing solves this issue. Error is located under handleChange method. Maybe i am handling wrong Ant design form. What could be issue here?

My form code:

import React from "react";
import { Form, Input, Button, Select } from "antd";

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;


class CustomForm extends React.Component {

    constructor(props) {
        super(props)
        this.state = {sport: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    handleFormSubmit = (event, requestType, trainingID) => {
        const sport = event.targets.elements.sport.value;
        ...
    }

    render() {
        return (
          <div>
                <Select name="sport" value={this.state.sport} style={{ width: 120 }} onChange={this.handleChange}>
                    <Option value="jooks" >Jooks</Option>
                    <Option value="jõud" >Jõud</Option>
                    <Option value="crossfit" >Crossfit</Option>
                    <Option value="kardio" >Kardio</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit" shape="round" >
                  {this.props.btnText}
                </Button>
              </FormItem>
            </Form>
          </div>
        );
    }
}

Answer 1

The onChange event for the antd select component does not provide an event object, it provides the actual value that has been selected.

Instead, change your handleChange method to

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

and then change your select onChange function to

onChange={value => this.handleChange("sport", value)}

So it would like like this

    <Select
      name="sport"
      value={this.state.sport}
      style={{ width: 120 }}
      onChange={value => this.handleChange("sport", value)}
    >
      <Option value="jooks">Jooks</Option>
      <Option value="jõud">Jõud</Option>
      <Option value="crossfit">Crossfit</Option>
      <Option value="kardio">Kardio</Option>
    </Select>

The easiest way to actually debug this situation would be to console log the event value passed in from the onChange event. This would have shown that it is in fact the value that was selected, and not an event object.

EDIT:

Im not sure if it was by accident, but <Form> and <FormItem> tags were missing. I have added the full class below

import React from "react";
import { Form, Input, Button, Select } from "antd";

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;

export default class CustomForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sport: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

  handleFormSubmit = value => {
    console.log(this.state);
  };

  render() {
    return (
      <div>
        <Form onFinish={this.handleFormSubmit}>
          <FormItem>
            <Select
              name="sport"
              value={this.state.sport}
              style={{ width: 120 }}
              onChange={value => this.handleChange("sport", value)}
            >
              <Option value="jooks">Jooks</Option>
              <Option value="jõud">Jõud</Option>
              <Option value="crossfit">Crossfit</Option>
              <Option value="kardio">Kardio</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit" shape="round">
              {this.props.btnText}
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}