ReduxForm and ReactRouter - Form Not Rendering - reactjs

Question

I'm refactoring some code on my first react app, which is a simple login form that redirects and renders a list of items on successful login. I have a form container, connected to the redux store, that should render a login form - decorated with reduxForm. I don't understand why the form is not rendering.
index.jsx
ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById('app')
);
App.jsx
import {LoginFormContainer} from './components/Login/LoginFormContainer'
class App extends Component {
render() {
return (
<Switch>
<Route exact path='/' component={LoginFormContainer}/>
</Switch>
)
}
}
export default App
LoginFormContainer.jsx
import LoginFormComponent from './LoginFormComponent';
import {reduxForm} from 'redux-form/immutable';
import {withRouter} from 'react-router-dom';
let LoginFormContainer = reduxForm({
form: 'login',
})(LoginFormComponent)
const mapStateToProps = null
const mapDispatchToProps = dispatch => {
return {
onSubmit: loginFormValues => {
dispatch(loginUser(loginFormValues))
}
}
}
const mergeProps = (stateProps, dispatchProps, ownProps) =>
Object.assign({}, stateProps, dispatchProps, ownProps)
LoginFormContainer = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(LoginFormContainer))
export default LoginFormContainer
LoginFormComponent.jsx
class LoginForm extends Component {
render() {
return (
<Row>
<Col xs={12} md={12}>
<form>
<FormGroup>
<Field
name="username"
type="email"
component={renderField}
label="Username"
validate={[required]}
/>
</FormGroup>
<FormGroup>
<Field
name="password"
type="password"
component={renderField}
label="Password"
validate={[required]} />
</FormGroup>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</Col>
</Row>
)
}
}
export default LoginForm

Answer 1

Simply removing the curly braces from the import of LoginFormContainer in App.jsx fixed the issue. import LoginFormContainer from './components/Login/LoginFormContainer'

Answer 2

Just a few minor exports/imports missing.
LoginFormContainer.jsx
import LoginFormComponent from './login_form_component';
import {reduxForm} from 'redux-form/immutable';
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux'; // missing import
// need to export these variables to be used below
export const LoginFormContainer = reduxForm({
form: 'login',
})(LoginFormComponent)
export const mapStateToProps = null
export const mapDispatchToProps = dispatch => {
return {
onSubmit: loginFormValues => {
dispatch(loginUser(loginFormValues))
}
}
}
// this is not needed
// export const mergeProps = (stateProps, dispatchProps, ownProps) =>
// Object.assign({}, stateProps, dispatchProps, ownProps)
// withRouter is not needed unless you need any of the
// functionality here https://reacttraining.com/react-router/web/api/withRouter
export default connect(mapStateToProps, mapDispatchToProps)(LoginFormContainer)
LoginFormComponent.jsx
Not sure if you just did not include the imports for this file. Make sure to have this in there
import React, { Component } from 'react';