3

I have a react component and I want to add predefined values in this component. How do I do that? My react-select box component looks like:

import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';

var CreatableDemo = createClass({
displayName: 'CreatableDemo',
propTypes: {
    hint: PropTypes.string,
    label: PropTypes.string
},
getInitialState () {
    return {
        multi: true,
        multiValue: [],
        options: [],
        skills_data: [],
        value: undefined
    };
},
handleOnChange (value) {
    const { multi } = this.state;
    if (multi) {
        this.setState({ multiValue: value });

    } else {
        this.setState({ value });
    }
    let skills_arr = [];
    if(value != []){
        for(let i = 0; i < value.length; i++){
            skills_arr.push(value[i].value);
        }
        this.props.handleSkillsChange(skills_arr);
        this.setState({ skills_data: skills_arr });
    }
    else{ 
        this.setState({ skills_data: [] });
        this.props.handleSkillsChange(this.state.skills_data);
    }
},
render () {
    const { multi, multiValue, value, options } = this.state;
    return (
        <div className="section">
            <div className="validate-input m-b-26 div-space form-div" data-validate="Skills are required">
                <span className="label-input100">Skills</span>
                <Select.Creatable   multi={multi} options={options} onChange={this.handleOnChange} value={multi ? multiValue : value}/>
                <div className="hint">{this.props.hint}</div>

            </div>
        </div>
    );
}
});

export default CreatableDemo;

I tried looking at other answers but it does not solve my problem. I added my default values in array as multiValue also. It does not solve the issue

Murtaza Manasawala
  • 697
  • 7
  • 14
  • Possible duplicate of [How to set a default value in react-select](https://stackoverflow.com/questions/43495696/how-to-set-a-default-value-in-react-select) – Agney Apr 08 '18 at 04:01
  • Did you find any solution for this ? – Vishal Sep 21 '18 at 04:41

1 Answers1

0

you don't place full code of component and i don't know multi and multiValue values!

but it seams problem at value props value={multi ? multiValue : value}. you checking existence multi and pass multiValue but multiValue can be undefined!

your code should be like this:

<Select.Creatable
    ...
    value={multiValue ? multiValue : value}
/>
Soroush Chehresa
  • 5,490
  • 1
  • 14
  • 29