title: What is the difference between key and id in React component?
body: <p>I have this in the parent component.</p>
  <pre><code>          &lt;RefreshSelect
              isMulti
              cacheOptions
              id='a'
              key = 'a'
              components={makeAnimated()}
              options={this.state['filter']['provider']}
              onChange={this.handleChangeProvider}
            /&gt;
            &lt;RefreshSelect
              isMulti
              cacheOptions
              id='b'
              key='b'
              components={makeAnimated()}
              options={this.state['filter']['provider']}
              onChange={this.handleChangeProvider}
            /&gt;
  
  </code></pre>
  <p>In the definition of this child component, I have the constructor that updates default values depending on the id/key.</p>
  <pre><code>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 (
        &lt;Select
          isMulti
          defaultValue={this.state.value}
          options={this.props.options}
          components={makeAnimated()}
          placeholder={this.props.label}
          onChange={this.props.onChange}
        /&gt;
      );
    }
  }
  
  
  </code></pre>
  <p>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?</p>