Search code examples
reactjsreduxredux-form

Field values don't change when debugging with the redux dev tools plugin

I'm using redux-form to create an authentication form.

import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Grid from '@material-ui/core/Grid';
import TextField from '../../components/TextFieldWrapper';



const Authentication = ({
  classes,
  submitting,
  handleSubmit,
}) => (
  <div>
      <form onSubmit={handleSubmit}>
        <Grid
          container
          direction="column"
          alignContent="center"
          spacing={24}
        >
          <Grid item xs={10} md={10} lg={10}>
            <Field
              name="Email"
              type="email"
              component={TextField}
              label="Email"
            />
          </Grid>
          <Grid item xs={6}>
            <Field
              name="Password"
              type="password"
              component={TextField}
              label="Password"
            />
          </Grid>
          <Grid item xs={6}>
            <Button
              variant="contained"
              color="primary"
              type="submit"
              disabled={submitting
            >
          Login
            </Button>
          </Grid>
        </Grid>
      </form>
    </PaperWrapper>
  </div>

);

Authentication.propTypes = {
  submitting: PropTypes.bool.isRequired,
  handleSubmit: PropTypes.func.isRequired,
};

const AuthenticationForm = reduxForm({
  form: 'AuthenticationForm',
})(Authentication);



export default AuthenticationFom;

TextFieldWrapper.jsx:

import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';


const TextFieldWrapper = ({
  label,
  type,
}) => (
  <TextField
    label={label}
    margin="normal"
    type={type}
    variant="outlined"
  />
);

TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};


export default TextFieldWrapper;

When I debug the application using redux-devtoolsI find that the Field's value don't change whatever I put in the TextFields. The state is like this: Redux State

Should I add value and onChangefunction to each Field. In the documentation of Redux-form they don't add value or onChange in their FieldComponent Material-Ui Example

Solution

  • I found the solution, I update the TextFieldWrapperComponent:

    import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';


const TextFieldWrapper = ({
  label,
  type,
  input,
}) => (
  <TextField
    label={label}
    margin="normal"
    type={type}
    value={input.value}
    onChange={input.onChange}
    variant="outlined"
  />
);

TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  input: PropTypes.shape({}).isRequired,
};


export default TextFieldWrapper;

    So I add the input property to my component in order to get props sent by redux-form.