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

Most upvoted comments

Happens to the best of us haha