redux-form-material-ui | wrapper components to facilitate using Material UI | User Interface library

Well using Material UI MenuItem didn't work but I was able to use redux form and create a nested drop down that did. This is a screen shot of what I created. It did not have the functionality to open/close a panel but it still gave the user a sense of a nested dropdown.

Here is the code that I changed in the SelectMenu method. The key was to use the native form of the Material UI Select component and the optgroup element.

The redux-form Field will pass props through to the component:

All other props will be passed along to the element generated by the component prop.

The TextField has a property named InputProps which can be used to pass props to the Input component it renders. This is also true if you're using redux-form-material-ui. Its TextField is simply a wrapper for the material-ui component.

The material-ui Input component has a property named inputProps which can be used to pass props to the input element it renders.

Ok, so what do I do?

You need to pass props all the way through, from Field, to TextField, to Input, to the input element.

So if we set InputProps on Field, it will be passed to TextField, which will pass it to the Input component. If the object we pass contains an inner inputProps (intentional lowercase 'i'), the Input component will pass it to the input element.

A game of hot-proptato:

Basically, define an inputProps object within InputProps and apply it to Field:

While I was able to override the CSS, I'd highly recommend moving away from using so many libraries (redux-form, react-toastify, reactstrap, material-ui, uppy and ck-editor all use their own required stylesheets!) within a single application, and instead attempt to limit yourself to one style library and building your own custom components on top of it. Otherwise, you're going to be spending a lot of time digging through the DOM and overriding layers upon layers of library stylesheets.

That said, here's a fixed layout:

What I added:

index.css

I would store the API result in the redux state, read it from your mapStateToProps and pass it to the component in the property initialValues setting enableReinitialize: true.

These 2 properties are the way of redux-form to change stuff programmatically "later on" after the form already rendered.

Otherwise , if you can fetch your data before even rendering the form, you can just use initialValues without enableReinitialize.

Another way is to use the change function provided by redux form

More info in the docs

The date field values passed as initialValues should be in the following format: YYYY-MM-DD, according to the input type date documentation.

Here's how you can format it, using moment.js:

I forked your application and tried fixing it. Your App must be inside a BrowserRouter in App.js and the Component you were using must be exported with

fetch GET 404 https://registry.npmjs.org/configureStore

Indeed configureStore is not available on NPM proper : https://www.npmjs.com/package/configureStore gives a "not found" error (compare to e.g. react https://www.npmjs.com/package/react)

Either the package.json is wrong (unlikely) OR you are supposed to you registry local to your organization. Use the --registry flag in npm and ask your team mates.

Had similar issue, found out that there is a compatible version of redux-form that is redux-form-material-ui for the material-ui-next

Try that..

Good Luck!

className={classes.submit} this is invalid. Class name have to be string (name of class)