CODEWITHSUNDEEP
javascriptreactjsreact-select
SkuPak
SkuPak

Reputation: 367

React-select warning hidden to uncontrolled

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)
  }

  componentDidMount() {
    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 component 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 component.

If I sub selected_question_obj from null to {}, the error vanishes but then the component 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 comment is appreciated. Thanks!

Upvotes: 3

Views: 3780

Answers (2)

kennyvh
kennyvh

Reputation: 2854

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)
}

Upvotes: 5

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

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:'/>

Upvotes: 2

Related Questions