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.
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.