Composition with react-redux-form components causing Element type undefined error

[sonarforte]

I'm trying to use react-redux-form with the UI components to render a form.

This code renders fine:

import { Control, Form, actions, } from 'react-redux-form'
import { Button as UIButton, Form as UIForm, } from 'semantic-ui-react'
...
class NewForm extends Component { 
  ...
  render() {
    return (
      <UIForm
        as={Form}
        model="forms.foo"
        onSubmit={(foo) => this.handleSubmit(foo)}>

        <Control.text
          label="Description"
          model="forms.foo.name" />

        <UIForm.Button
          type="submit">
          Submit
        </UIForm.Button>
      </UIForm>
    )
  }

As you can see, the Form and Button components from Semantic are composed with react-redux-form's components. Everything works, including the onSubmit button.

However, replacing the Control.text element with the following:

        <UIForm.Input
          type="text"
          as={Control.text}
          label="Name"
          model="forms.foo.name" />

Causes the following error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

This is weird since composition is working with some of the components, but not others.

The relevant documentation for react-redux-form can be found here.

FWIW, I've tried many combinations of different semantic props such as control, type, etc., and none of them seem to work.

Lastly, here is everything I'm using:

    "babel-polyfill": "^6.23.0",
    "isomorphic-fetch": "^2.2.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-redux-form": "^1.7.0",
    "react-router": "^3.0.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.1",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.9",
    "semantic-ui-react": "^0.67.0"

[levithomason]

The error is a React error indicating that Control.text is undefined. When you render as another component, we simply return that component in the render function.

In this case I'd suggest not using the shorthand Form.Input and instead use a regular Form.Field with your control inside of it.

[sonarforte]

I did what you suggested, and it worked. However, I noticed I cannot use a label prop inside of the component or it will give me the following error:

Uncaught Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. Check the render method of Control.

I can stick the label somewhere else. Either way, thanks.

[levithomason]

There should be no children an input tag. The markup should look something like this (assuming Input was imported as UIInput):

<UIForm.Field>
  <label>Enter Password</label>
  <UIInput type='password' />
</UIForm.Field>