React-boilerplate: React-form unable to type.

[fobus42]

Hello,

I'm trying to implement react-form in this boiler plate. I have installed react-form in application. But my problem is I'can type anything in the edit box. What I am doing wrong?

Here is my index.js

``import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import {makeSelectEmail} from './selectors';
import messages from './messages';
import Button from 'components/Button'
import InputBig from './InputBig'
import {OnLoginFormSubmit, OnEmailChanged} from './actions'

import LoginForm from './form'

export class Login extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
render() {
return (

title="Login"
meta={[
{ name: 'description', content: 'Description of Login' },
]}
/>

);
}
}

Login.propTypes = {
OnLoginFormSubmit: PropTypes.func.isRequired,
email:React.PropTypes.string
};

const mapStateToProps = createStructuredSelector({
email: makeSelectEmail()
});

function mapDispatchToProps(dispatch) {
return {
OnLoginFormSubmit: (evt) => {
console.log(evt);
//if (evt !== undefined && evt.preventDefault) evt.preventDefault();
//dispatch(OnLoginFormSubmit());
},
onChangeEmail: (evt) => {
console.log(evt.target.value);
dispatch(OnEmailChanged(evt.target.value));
},
};
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);``

Here is my Form.js

`import React,{Comfpfonent} from 'react'
import {Field, reduxForm} from 'redux-form'
import Button from 'components/Button'

class LoginForm extends React.Component {
render () {
const {handleSubmit} = this.props;

    return(
        <form onSubmit={handleSubmit}>

        <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
        />

                  <Field
        name="email"
        component="input"
        type="email"
        placeholder="Email"
      />

            <Button type="submit">Send</Button>
        </form>
    )
}

}

LoginForm = reduxForm({
form: 'contact' // a unique name for this form
})(LoginForm);

export default LoginForm;`

Here is 'reducers.js'

`/**

• Combine all reducers in this file and export the combined reducers.
• If we were to do this in store.js, reducers wouldn't be hot reloadable.
  */

import { fromJS } from 'immutable';
import { combineReducers } from 'redux-immutable';
import { LOCATION_CHANGE } from 'react-router-redux';

import globalReducer from 'containers/App/reducer';
import languageProviderReducer from 'containers/LanguageProvider/reducer';
import { reducer as reduxFormReducer } from 'redux-form';

/*

• routeReducer
  *
• The reducer merges route location changes into our immutable state.
• The change is necessitated by moving to react-router-redux@4
  *
  */

// Initial routing state
const routeInitialState = fromJS({
locationBeforeTransitions: null,
});

/**

• Merge route into the global application state
  /
  function routeReducer(state = routeInitialState, action) {
  switch (action.type) {
  / istanbul ignore next */
  case LOCATION_CHANGE:
  return state.merge({
  locationBeforeTransitions: action.payload,
  });
  default:
  return state;
  }
  }

/**

• Creates the main reducer with the asynchronously loaded ones
  */
  export default function createReducer(asyncReducers) {
  return combineReducers({
  route: routeReducer,
  global: globalReducer,
  language: languageProviderReducer,
  form : reduxFormReducer,
  ...asyncReducers,
  });
  }
  `

[viiiprock]

try to import {...} from 'redux-form/immutable';

[fobus42]

Yes it fixed my problem.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.