Q:

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

I have a parent component in which below component is producing dynamically in map function as below:
const renderListing = this.props.listing.map(function(list, index) {
        return (
          <Listing
            key={index}
            title={list.title}
            totalWorkers={list.totalWorkers}
          />
        );
      }, this);

In this <Listing /> component, I have a Checkbox from react-md as below:
import { Checkbox } from "react-md";
class Listing extends React.Component {
  render() {
    return (
<Checkbox id="`listSector-${this.props.key}`" name="list-sector" />
   );
  }
}

I wanted to give the props named key concatenated with id="listSector-0" , id="listSector-1" and so on.
I have tried string-literals but all invain. 
Can anyone know that how to give dynamic this.props.key concatenated with id of the checkbox ?
Thanks

A:

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

