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

Question

I have a parent component in which below component is producing dynamically in map function as below:

const renderListing = this.props.listi         


        

Answer 1

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

Answer 2

'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" />