informed: Custom wrapper component using "asField" causes warning for Checkbox and Select
V 3.24.0
We use a wrapper component so we can easily update all forms on our site. While upgrading, I noticed the use of Checkbox and Select components causes a warning, “Check to make sure you have not registered two fields with the fieldName.” Here is a simplified version of what we have:
import {Form, asField, BasicText, Select, Checkbox} from 'informed';
export const MyInputWrapper = asField(props => {
return <React.Fragment>
{{
'text': <BasicText {...props}/>,
'select': <Select {...props}/>,
'checkbox': <Checkbox {...props}/>
}[props.type]}
</React.Fragment>
});
function App() {
return (
<Form>
{({}) => (
<React.Fragment>
<MyInputWrapper type="text" field="myText"/>
<MyInputWrapper type="select" field="mySelect"/>
<MyInputWrapper type="text" field="myText"/>
</React.Fragment>
)}
</Form>
);
}
export default App;
Is there something obvious I am doing wrong here? The form appears to work fine, but the warnings are filling up console.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 27
Happens to the best of us haha