title: Reactjs how to get value from selected element
body: <p>so I have this code for posting to my backend API. Normal form perfectly fine; I managed to post to my database. So I add a Cascader from Ant Design CSS Framework, and every time I selected the value, it produced an error </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <p>Here is the code:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import { Button, Cascader, Form, Input, Modal } from 'antd';
  
  const FormProduct = Form.Item;
  const computerType = [
    {
      value: 'computer',
      label: 'Computer',
    },
    {
      value: 'laptop',
      label: 'Laptop',
    }
  ]
  
  export default class FormInventory extends React.Component {
    state = {
      category: '',
      productname: '',
    };
  
    handleCategoryChange = event =&gt; { this.setState({ category: event.target.value }) }
    handleProductNameChange = event =&gt; { this.setState({ productname: event.target.value }) }
  
    handleSubmit = event =&gt; {
      event.preventDefault();
  
      axios.post('myapi',
        {
          category: this.state.category,
          productname: this.state.productname,
        })
        .then(
          function success() {
            const modal = Modal.success({
              title: 'Success',
              content: 'Data successfully add',
            });
            setTimeout(() =&gt; modal.destroy(), 2000);
          }
        )
    }
  
    render() {
      return (
        &lt;Form onSubmit={this.handleSubmit}&gt;
          &lt;FormProduct {...formProductLayout} label="Computer Category"&gt;
            &lt;Cascader options={computerType} category={this.state.value} onChange={this.handleCategoryChange} /&gt;
          &lt;/FormProduct&gt;
          &lt;FormProduct {...formProductLayout} label="Product Name"&gt;
            &lt;Input type="text" productname={this.state.productname} onChange={this.handleProductNameChange} /&gt;
          &lt;/FormProduct&gt;
          &lt;FormProduct wrapperCol={{ span: 12, offset: 2 }}&gt;
            &lt;Button type="primary" htmlType="submit"&gt;
              Add Item
            &lt;/Button&gt;
          &lt;/FormProduct&gt;
        &lt;/Form&gt;
      )
    }
  }
  </code></pre>