Let’s say you are using the simple stateless component below:

function MyStateLessComponent( props )
{
  const enableReading = props.enableReading || false;

  if( enableReading ) {
    // do something...
  {

  return(
    <div className="my-component-class">
      <div {...props} className="my-component-class-content">
        Hello, world!
      </div>
    </div>
  );
}

As you can see, we are using the {...props} special attribute to pass all props to the second div. Also, we are supporting our own attribute enableReading. This own attribute will be inserted into the div as well. So, you’ll receive the following warning message in your browser console:

Warning: Unknown prop `enableReading` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Fortunately, we can fix it by using:

function MyStateLessComponent( props )
{
  // clone the props in divPorps
  const divProps = Object.assign( {}, props );

  // we can still use props
  const enableReading = props.enableReading || false;

  // remove unknown attribute from the copy of props
  // so, we can use this below
  delete divProps.enableReading;

  if( enableReading ) {
    // do something...
  {

  return(
    <div className="my-component-class">
      <div {...divProps} className="my-component-class-content">
        Hello, world!
      </div>
    </div>
  );
}

In other words, never pass the “props” variable directly when you think that maybe present some custom attributes.