user1775718 user1775718 - 1 year ago 193
React JSX Question

Unknown props on direct copy of example form

I'm trying to get the basic form example for redux form ( working. I've copied the code and trimmed it down to just one input, like so:

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const { DOM: { input, select, textarea } } = React;

console.log('input', input);

const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props;
console.log('props', props);
return (
<form onSubmit={handleSubmit}>
<label htmlFor="firstName">First Name</label>
<Field id="firstName" name="firstName" component={input} type="text" placeholder="First Name" />
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>

export default reduxForm({
form: 'simple', // a unique identifier for this form

This unfortunately results in:

Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. For details, see react-unknown-prop
in input (created by bound createElement)
in bound createElement (created by ConnectedField)
in ConnectedField (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (created by SimpleForm)
in div (created by SimpleForm)
in div (created by SimpleForm)
in form (created by SimpleForm)
in SimpleForm (created by Form(SimpleForm))
in Form(SimpleForm) (created by Connect(Form(SimpleForm)))
in Connect(Form(SimpleForm)) (created by ReduxForm)
in ReduxForm (created by CreateEntityPage)
in div (created by Paper)
in Paper (created by CreateEntityPage)
in div (created by CreateEntityPage)
in CreateEntityPage (created by RouterContext)
in main (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in div (created by App)
in div (created by App)
in App (created by Connect(App))
in Connect(App) (created by RouterContext)
in RouterContext (created by Router)
in Router (created by App)
in div (created by App)
in IntlProvider (created by IntlWrapper)
in IntlWrapper (created by Connect(IntlWrapper))
in Connect(IntlWrapper) (created by App)
in Provider (created by App)
in App
in AppContainerprintWarning

and then:

Uncaught (in promise) Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Check the render method of bound createElement.(…)

Can anyone let me know what I'm doing wrong??

Answer Source

change component={input} to component="input" . Same for textarea & select.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download