I have this in the parent ponent.

          <RefreshSelect
            isMulti
            cacheOptions
            id='a'
            key = 'a'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />
          <RefreshSelect
            isMulti
            cacheOptions
            id='b'
            key='b'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />

In the definition of this child ponent, I have the constructor that updates default values depending on the id/key.

export default class RefreshSelect extends Component {
  constructor(props) {
    super(props);
    // console.log(props)
    // console.log(props.key)
    if (props.key==''){
      this.state = { value: [{ value: 'all', label: 'all', color: '#666666' }] };
    }else if ( props.key=='a') {
      this.state = { value: [{ value: '123', label: '123', color: '#666666' },
      { value: '234', label: '234', color: '#666666' },
      { value: '456', label: '456', color: '#666666' }] };
    }else {
      this.state = { value: [{ value: 'nvnvnvnvn', label: 'ksksksksks', color: '#666666' }] };
    }
  }

  render() {
    console.log(this.props)
    return (
      <Select
        isMulti
        defaultValue={this.state.value}
        options={this.props.options}
        ponents={makeAnimated()}
        placeholder={this.props.label}
        onChange={this.props.onChange}
      />
    );
  }
}

First, it looks like I'm not able to assign the key and access it in the constructor. Why is that? Secondly, what is the difference between id and key? Which one should I use and when?

I have this in the parent ponent.

          <RefreshSelect
            isMulti
            cacheOptions
            id='a'
            key = 'a'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />
          <RefreshSelect
            isMulti
            cacheOptions
            id='b'
            key='b'
            ponents={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />

In the definition of this child ponent, I have the constructor that updates default values depending on the id/key.

export default class RefreshSelect extends Component {
  constructor(props) {
    super(props);
    // console.log(props)
    // console.log(props.key)
    if (props.key==''){
      this.state = { value: [{ value: 'all', label: 'all', color: '#666666' }] };
    }else if ( props.key=='a') {
      this.state = { value: [{ value: '123', label: '123', color: '#666666' },
      { value: '234', label: '234', color: '#666666' },
      { value: '456', label: '456', color: '#666666' }] };
    }else {
      this.state = { value: [{ value: 'nvnvnvnvn', label: 'ksksksksks', color: '#666666' }] };
    }
  }

  render() {
    console.log(this.props)
    return (
      <Select
        isMulti
        defaultValue={this.state.value}
        options={this.props.options}
        ponents={makeAnimated()}
        placeholder={this.props.label}
        onChange={this.props.onChange}
      />
    );
  }
}

First, it looks like I'm not able to assign the key and access it in the constructor. Why is that? Secondly, what is the difference between id and key? Which one should I use and when?

• javascript
• reactjs

1 Answer 1

key is a special prop that helps React identify which items have changed, are added, or are removed inside lists. Keys should be given to the elements inside an array of ponents to give the elements a stable identity.

Array.from({ length: 5 }).fill(0).map((_,index) => <span key={index} />)

id probably refers to the HTML attribute and it's going to be spreaded inside the original DOM element implemented by Select

Also you probably don't want to use index as key