React HOC DOM properties are triggering 'Unknown event handler property'

Question

I just made a HOC with recompose but for some reason all the props passed down are triggering a React Warning.

Warning: Unknown event handler property `onSaveChanges`. It will be ignored.

And all my property which has the same syntax (starting with lower case, and then an upper case: lowerUpper). Of course if I write it full lower case then its won't trigger any warnings, BUT am I supposed to write all my props in lower case if I use a HOC with recompose?

My HOC:

import React from 'react'

import { withStateHandlers, withHandlers, withState, compose } from 'recompose'

const editableCell = (defaults) => 
    compose(
        withStateHandlers(
            { isEditing: false, value: ''},
            {
                toggleEditing: ({ isEditing, inputValue }) => defaultValue => ({
                    isEditing: true,
                    inputValue: isEditing ? inputValue : defaultValue
                }),
                onChange: () => event => ({
                    inputValue: event.target.value
                }),
                deactiveCell: () => () => ({
                    isEditing: false
                })
            }
        ),
        withHandlers({
            handleSave: ({
                isEditing,
                inputValue,
                onSaveChanges,
                deactiveCell,
            }) => event => {
                event.preventDefault()
                //can validate before save...
                deactiveCell()
                return onSaveChanges(isEditing, inputValue) 
            }
        })
    )

export default editableCell

Basically ALL my property is triggering this warning (either function, or just a simple primitive, basically anything [isEditing, inputValue, onChange, deactivateCell, onSaveChanges, handleSave... etc]

How am I suppose to solve this error? Its really annoying.

Answer 1

The problem is not related to Recompose. According to the React doc:

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

You should pass only valid props to a DOM element. For example:

Don't

function MyDiv(props) {
  return <div {...props} />
}

Do

function MyDiv({ onSaveChanges, inputValue, /** other invalid props **/, ...otherProps}) {
  return <div {...otherProps} />
}

There are more examples in the React doc.