I'm using react-select in my code:

import React, {Component} from 'react';
import Select, {createFilter} from 'react-select';

let _ = require('underscore')

class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      variables_api: [],
      selected_question_obj: null
    };
    this.handleChange_question = this.handleChange_question.bind(this)
  }

  ponentDidMount() {
    fetch('http://127.0.0.1:5000/variables')
    .then(res => {
      return res.json()})
    .then(data => {
      this.setState({
        variables_api: data
      });
    })
  }

  handleChange_question(evt) {
    this.setState({
      selected_question_obj: evt
    });
  }

  render () {
    var key_api = this.state.variables_api.map(obj => {
      return {
        key_api: obj['index'],
        question_api: obj['Label Variabile'],
      };
    })
    var key = _.groupBy(key_api, 'question_api');

    var question_uni = Object.keys(key);
    var selector_q_options = []
    for (var i=0; i<question_uni.length; i++) {
      var temp_0 = {
        key: i.toString(),
        label: question_uni[i]
      };
      selector_q_options.push(temp_0)
    }

    console.log(this.state)

    return (
      <div>

      <Select
        name='question_selector'
        value={this.state.selected_question_obj}
        onChange={this.handleChange_question.bind(this)}
        options={selector_q_options}
        filterOption={createFilter({ignoreAccents: false})}
        placeholder='Select question:'/>

      </div>
    );
  };
}

export default Test

I'm using react-select in my code:

import React, {Component} from 'react';
import Select, {createFilter} from 'react-select';

let _ = require('underscore')

class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      variables_api: [],
      selected_question_obj: null
    };
    this.handleChange_question = this.handleChange_question.bind(this)
  }

  ponentDidMount() {
    fetch('http://127.0.0.1:5000/variables')
    .then(res => {
      return res.json()})
    .then(data => {
      this.setState({
        variables_api: data
      });
    })
  }

  handleChange_question(evt) {
    this.setState({
      selected_question_obj: evt
    });
  }

  render () {
    var key_api = this.state.variables_api.map(obj => {
      return {
        key_api: obj['index'],
        question_api: obj['Label Variabile'],
      };
    })
    var key = _.groupBy(key_api, 'question_api');

    var question_uni = Object.keys(key);
    var selector_q_options = []
    for (var i=0; i<question_uni.length; i++) {
      var temp_0 = {
        key: i.toString(),
        label: question_uni[i]
      };
      selector_q_options.push(temp_0)
    }

    console.log(this.state)

    return (
      <div>

      <Select
        name='question_selector'
        value={this.state.selected_question_obj}
        onChange={this.handleChange_question.bind(this)}
        options={selector_q_options}
        filterOption={createFilter({ignoreAccents: false})}
        placeholder='Select question:'/>

      </div>
    );
  };
}

export default Test

Everything works fine, expect for the fact that, when I select something, I receive this warning:

A ponent is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the ponent.

If I sub selected_question_obj from null to {}, the error vanishes but then the ponent is not displayed correctly (like if you already selected something).

Can you help me please? If you see something strange into the code, bear in mind that I'm using both js and react for less than a month, so any ment is appreciated. Thanks!

• javascript
• reactjs
• react-select

2 Answers 2

It looks like the reason you are getting that error is because the options you are passing into the <Select> are not the proper interface. It looks like react-select calls this helper function to get the value from each option and it is returns undefined.

Try changing "key" to "value" for your option keys:

for (var i=0; i<question_uni.length; i++) {
  var temp_0 = {
    key: i.toString(),       // should be 'value' instead of 'key'
    label: question_uni[i]
  };
  selector_q_options.push(temp_0)
}

to this:

for (var i=0; i<question_uni.length; i++) {
  var temp_0 = {
    value: i.toString(),      // changed to 'value'
    label: question_uni[i]
  };
  selector_q_options.push(temp_0)
}

Try empty string. Unfortunately, using null or undefined for value of inputs leads to that error. Something like this might work:

<Select
    name='question_selector'
    value={this.state.selected_question_obj || ""}
    onChange={this.handleChange_question.bind(this)}
    options={selector_q_options}
    filterOption={createFilter({ignoreAccents: false})}
    placeholder='Select question:'/>