select box in reactjs not working

Question

I have a form with a select box that gets data from the server and post it to the same server. I'm using select box from ant design.

But that part that handles changes handleChange() is not working and give me this error :

Cannot read property 'value' of undefined

This is my code:

let optionData = [];

class ContentCountries extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: 'Select',
      jsonData: 0
    };
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    event.preventDefault();
    var data = {
      name: this.state.value
    }
   console.log(data);
    /*$.ajax({
      type: 'POST',
      url: 'https://google.com',
      data: data
    })*/
  }
  componentDidMount(){
    //ajax request
    /*$.ajax({
      type: 'GET',
      url: 'https://google.com',
      succes: function(data){
        optionData = data;
      }
    })*/
    //static example
    optionData.push('Bangalore');
    optionData.push('Pune');
    this.setState({jsonData: 1});//change the status so the select tag will get the new values(render will happen)
  }
  render() {
    var optionsTag = <Option value="">Select City</Option>  
   if(optionData.length){
     optionsTag = optionData.map((data,index) => {
                          return <Option value={data} key={index}>{data}</Option>
                          })
   }

    return (
   <form onSubmit={false}>
        <label>
          Please select city:
          <Select value={this.state.value} onChange={this.handleChange.bind(this)}>
            { optionsTag}
          </Select>
        </label>
        <input type="button" onClick={this.handleSubmit.bind(this)} value="Submit" />
      </form>
    )
  }
}

Are you using custom Option and Select components which aren't being shown here? If not, regular html elements should be lowercase. If you are using a custom Select component, you will need to check its docs to see what it does with an onChange callback. — Jonny Buchanan
– Jonny Buchanan, Commented Dec 25, 2016 at 9:35
yes i use custome select and option of ant design ant.design/components/form but it has nothing onChange method @JonnyBuchanan — Yeganeh Salami
– Yeganeh Salami, Commented Dec 25, 2016 at 9:42

An Nguyen · Accepted Answer · 2016-12-25 09:47:28Z

3

EDITED: Sorry, as you said, it is Ant Design. However, it is almost the same with your handleChange function. Because it takes the value as the argument, not the event. So that there is no target property inside passed argument.

handleChange(val) {
    this.setState({value: val});
  }

edited Dec 25, 2016 at 9:47

answered Dec 25, 2016 at 9:42

An Nguyen

1,47810 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

select box in reactjs not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related