Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140762

React-select warning hidden to uncontrolled

$
0
0

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!


Viewing all articles
Browse latest Browse all 140762

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>