unclecheese / react-selectable

A component for react that allows mouse selection of child items
MIT License
142 stars 72 forks source link

Unknown props `onSelection`, ...., on <div> tag. Remove these props from the element. #16

Closed bortexz closed 8 years ago

bortexz commented 8 years ago

When creating the child element with the component specified, it throws the following warning:

Warning: Unknown props `onSelection`, `fixedPosition`, `selectOnMouseMove`, `component`, `tolerance` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

This is because the module is passing all the props that are managed by the SelectableGroup down to the child of the original element. I have been able to fix that by doing the following:

        const newProps = Object.assign({}, this.props);
        delete newProps.onSelection;
        delete newProps.fixedPosition;
        delete newProps.selectOnMouseMove;
        delete newProps.component;
        delete newPorps.tolerance;

        return (
            <this.props.component {...newProps}>
                {this.state.isBoxSelecting &&
                  <div style={boxStyle} ref="selectbox"><span style={spanStyle}></span></div>
                }
                {this.props.children}
            </this.props.component>
        );

Object.assign() has compatibility with latest browsers, but not with IE.

Other options would be to use lodash.assign or even implement a custom method to remove the properties.

Let me know what works best for the project, and I can make a PR myself.