CODEWITHSUNDEEP
javascriptreactjs
Focus
Focus

Reputation: 1013

What is the difference between key and id in React component?

I have this in the parent component.

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

In the definition of this child component, 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}
        components={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?

Upvotes: 3

Views: 9651

Answers (1)

Dupocas
Dupocas

Reputation: 21317

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 components 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

Upvotes: 4

Related Questions