Redux-Form: setting "component" prop as "React.DOM.input" yields error

Question

I'm creating a very simply input form in my react-redux app with redux-form. I'm following along the with the example of the redux-form page, but it's throwing me an error. The source of the error comes from trying to set the component prop to React.DOM.input. It throws this error:

TypeError: _react2.default.DOM is undefined

However, if I pass the string 'input' into the component prop, it works fine, and I can see the changed state in my redux dev tool. I'm just reaaaaally not sure where I got the idea to put it as a string and now I'm super curious 😂.

let SubsForm = ({ handleSubmit, availScripts }) => {
    const subs = availScripts.map(script =>
        [
            <label htmlFor={script}>{script}</label>,
            <Field key={script} component={React.DOM.input} type="checkbox" name={script} />,
            <br />,            
        ]
    );

    return [
        <form>
            {subs}
        </form>
    ];
};

Thanks

markerikson · Accepted Answer · 2018-01-15 05:08:18Z

2

There's a difference between import ReactDOM from "react-dom", and React.DOM.

The "react-dom" package is what you need to render React components into an HTML page.

Meanwhile, React.DOM was a set of factory functions for creating virtual DOM elements in render methods. It's been moved out into a separate react-dom-factories package, and is no longer part of the main React package as of React 16.

React.createElement() takes either a React component type or a string DOM HTML element name as its first argument, . The React.DOM factory functions wrapped up that process a bit. So, these are identical:

React.createElement("input", {name : "myInput"});
React.DOM.input({name : "myInput"})

answered Jan 15, 2018 at 5:08

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akhil Rao · Accepted Answer · 2018-01-15 04:53:36Z

0

Try importing the react component.

 import React from "react";

answered Jan 15, 2018 at 4:53

akhil Rao

1,1697 silver badges17 bronze badges

Collectives™ on Stack Overflow

Redux-Form: setting "component" prop as "React.DOM.input" yields error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related