Redux-form: Field React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass

Created on 12 Jun 2016 · 3Comments · Source: redux-form/redux-form

Hi!

Can't make Field work for me anyhow.

trying the easiest example:

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './CreateGameForm.css'
import _ from 'lodash'
import { FloatingActionButton, FlatButton, Dialog, TextField, SelectField, MenuItem } from 'material-ui'
import ContentAdd from 'material-ui/svg-icons/content/add'
import { browserHistory } from 'react-router'
import { Field } from 'redux-form'
let CreateGameForm = React.createClass({
  onSubmit(formData) {
    console.log(formData)
    // api.createGame(this.props.name, this.props.players, this.props.rounds, this.props.time)
    // this.props.toggleForm()
    // this.props.toggleSnackbar('Game created')
    // browserHistory.push('/game')
  },

  render() {
    const {fields: {name, players, rounds, time}, handleSubmit} = this.props

    const playersAmounts = _.range(2, 10).map((i) => <MenuItem value={i} key={i} primaryText={i} />)
    const roundsAmounts = _.range(3, 10).map((i) => <MenuItem value={i} key={i} primaryText={i} />)
    const timeAmounts = [15,30,45].map((i) => <MenuItem value={i} key={i} primaryText={i} />)

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.props.toggleForm}
      />,
      <FlatButton
        label="Create"
        secondary={true}
        form='create-game'
      />
    ]

    return (
      <div styleName="button-container">
        <FloatingActionButton secondary={true} styleName="new-game-button" onTouchTap={this.props.toggleForm}>
          <ContentAdd />
        </FloatingActionButton>
        <Dialog
          title="New Game"
          open={this.props.open}
          actions={actions}
          onRequestClose={this.props.toggleForm}
          contentClassName={styles.form}
          titleClassName={styles.title}>
          <div>
            <form id='create-game' onSubmit={handleSubmit(this.onSubmit)}>
              <TextField {...name}
                hintText="Name"
                floatingLabelText="Name of your game"
                errorText={name.touched && name.error}
                errorStyle={{color: '#FF3D00'}}
                autoFocus/>
        --->      <Field component="input" type="text"/>        <----
              <SelectField {...players}
                value={players.value || ''}
                errorText={players.touched && players.error}
                errorStyle={{color: '#FF3D00'}}
                hintText="Players amount"
                onChange = {(event, index, value) => this.props.onChange(value)}>
                {playersAmounts}
              </SelectField>
              <SelectField {...rounds}
                errorText={rounds.touched && rounds.error}
                errorStyle={{color: '#FF3D00'}}
                hintText="Rounds amount">
                {roundsAmounts}
              </SelectField>
              <SelectField {...time}
                errorText={time.touched && time.error}
                errorStyle={{color: '#FF3D00'}}
                hintText="Time to think">
                {timeAmounts}
              </SelectField>
            </form>
          </div>
        </Dialog>
      </div>
    )
  }
})

export default CSSModules(CreateGameForm, styles)

and receive

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass

without 'Field' everything works

Any ideas?

Source