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);

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.