unknown props warning

current.js

const ContactBadge = (props) => (
  <div className='Badge' {...props}>
    <div>{props.user.name}</div>
    <div>{props.contactMethod.type}</div>
  </div>
);

export default connect((state, {userId, contactMethodId}) => ({
  user: selectUser(state, userId),
  contactMethod: selectContactMethod(state, contactMethodId)
}))(ContactBadge);

delete.js

//Using clone+delete to satisfy unknown props warning
const ContactBadge = (props) => {
  const divProps = {...props};
  delete divProps.user;
  delete divProps.contactMethod;
  delete divProps.userId;
  delete divProps.contactMethodId;
  delete divProps.dispatch;
  
  return (
    <div className='Badge' {...divProps}>
      <div>{props.user.name}</div>
      <div>{props.contactMethod.type}</div>
    </div>
  );
};

export default connect((state, {userId, contactMethodId}) => ({
  user: selectUser(state, userId),
  contactMethod: selectContactMethod(state, contactMethodId)
}))(ContactBadge);

destructure.js

//Using destructuring to satisfy unknown props warning
const ContactBadge = ({user, contactMethod, userId, contactMethodId, dispatch, ...rest}) => (
  <div className='Badge' {...rest}>
    <div>{user.name}</div>
    <div>{contactMethod.type}</div>
  </div>
);

export default connect((state, {userId, contactMethodId}) => ({
  user: selectUser(state, userId),
  contactMethod: selectContactMethod(state, contactMethodId)
}))(ContactBadge);

FWIW, I wrote a utility function filterOwnProps(reactElement) that returns only props that don't belong to the current component. It's meant for class components, but you could probably adapt it to work with stateless functional components as well.

const filterOwnProps = (element) => {
  const propTypes = element.constructor.propTypes
  const props = {...element.props}

  for (let key in propTypes) {
    delete props[key]
  }

  return props
}

export default filterOwnProps

class MyComponent {
  static propTypes = {
    foo: React.PropTypes.string,
    bar: React.PropTypes.string
  }

  render() {
    <div {...filterOwnProps(this)}>
      {foo}: {bar}
    </div>
  }
}

<MyComponent foo="foo" bar="bar" onClick={e => console.log(e)} /> // no Unknown props warning about foo and bar!

This is our solution in an app which is almost impossible to refactor every component:

// DOMElement.js
import React, { Component } from 'react';
import DOMProperty from 'react/lib/DOMProperty';
import EventPluginRegistry from 'react/lib/EventPluginRegistry';
import pick from 'lodash/pick';
import keys from 'lodash/keys';
import concat from 'lodash/concat';

const reactKeys = [
  'children',
  'dangerouslySetInnerHTML',
  'autoFocus',
  'defaultValue',
  'valueLink',
  'defaultChecked',
  'checkedLink',
  'innerHTML',
  'suppressContentEditableWarning',
  'onFocusIn',
  'onFocusOut',
  'onFocus',
];

const DOMKeys = keys(DOMProperty.properties);
const eventKeys = keys(EventPluginRegistry.registrationNameModules);

const pickProps = pick(
  concat(
    reactKeys,
    concat(DOMKeys, eventKeys)
  )
);

export default function domElement(Komponent) {
  /* eslint-disable react/prefer-stateless-function */
  return class DOMElement extends Component {
    render() {
      return <Komponent { ...pickProps(this.props) } />;
    }
  };
}

// Div.js
import domElement from './DOMElement';
export default domElement('div');

// Usage:
import Div from 'Div'
...
<Div foo="bar" baz /> // No errors

@burakcan This is not a solution we recommend. Those modules are internal and may be changed/removed in any release.

@gaearon, yes we're aware of that. But in that case, there's only one file to change.