react-select:: Type '{ label: string; value: string; }' is missing the following properties from type 'readonly never[]'

user_14515024 0
Viewed 1309
state = {
  groupPermissionValue: {label: '', value: ''},
}

<Select instanceId="user-group" onChange={this.selectUserGroupOption} 
      value={this.state.groupPermissionValue} 
      options={this.state.groupPermission} id="user-group" className="form-conrol"/>

error

Type error: Type '{ label: string; value: string; }' is missing the following properties from type 'readonly never[]': length, concat, join, slice, and 16 more.

value format is "{label: String, value: String}". but I don't know why get this error.

react-select typescript reactjs
1 Answers

Options should be an array of objects like below,

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' }
];

Sample Code :-

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' }
];

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState(
      { selectedOption },
      () => console.log(`Selected Option:`, this.state.selectedOption)
    );
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}
user_33836930
Related