key is not available as prop in the Child component in ReactJs

'key' and 'ref' are reserved words that are not allowed to be passed as props. You can pass another prop with the same value

const renderListing = this.props.listing.map(function(list, index) {
    return (
      <Listing
        key={index}
        keyId={index}
        title={list.title}
        totalWorkers={list.totalWorkers}
      />
    );
  }, this);

and use it like

<Checkbox id="`listSector-${this.props.keyId}`" name="list-sector" />

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component.

Special Props Warning – React

Tags:

Reactjs

Jsx