CODEWITHSUNDEEP
reactjsreduxredux-form
k10a
k10a

Reputation: 1087

Redux Form can't edit user profile

I'm trying to make an edit user profile form in React + Redux Form + Firebase, my problem is that I can't enter any text in generated form in Redux Form. I try to enter some text to this but it's disabled...

Actually, initially I fetch user profile data (and it works). Then I'm trying to build edit form for editing profile.

class Settings extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.fetchProfile();
  }

  renderField = field => {
    const {
      input,
      label,
      type,
      meta: { touched, error }
    } = field;
    return (
      <div className="formItem">
        <p>{label}</p>
        <input {...input} type={type} placeholder={label} />
        {touched && error && <span>{error}</span>}
      </div>
    );
  };

  onSubmit = values => {
    const { uid } = this.props.room;
    this.props.updateProfile(uid, values);
  };

  render() {
    const { handleSubmit, pristine, submitting, invalid, room } = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            label="Your name"
            name="name"
            type="text"
            value={user.name}
            component={this.renderField}
          />
          <div className="formBtn">
            <input
              type="submit"
              className="btn btnPrimary"
              value="Save Changes"
              disabled={pristine || submitting || invalid}
            />
          </div>
        </form>
      </div>
    );
  }
}

const validate = values => {
  const errors = {};
  console.log(values);
  if (!values.name) errors.name = "Enter your name";
  return errors;
};

const mapDispatchToProps = { fetchProfile, updateProfile };

function mapStateToProps({ users }) {
  return { user: users };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({ validate, form: "profileForm", enableReinitialize: true })(
    Settings
  )
);

Upvotes: 0

Views: 458

Answers (2)

k10a
k10a

Reputation: 1087

import { createStore, applyMiddleware, combineReducers } from "redux";
import reduxThunk from "redux-thunk";
import { reducer as formReducer } from "redux-form";

const rootReducer = combineReducers({
  form: formReducer
});

const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

I have added formReducer, it works.

Upvotes: 0

Aleksandr Primak
Aleksandr Primak

Reputation: 111

You do not need to provide value to Field component, instead you need to pass values as initialValues in mapStateToProps:

function mapStateToProps({ users }) {
  return {
    user: users,
    initialValues: {
      name: users.name,
    },
  };
}

Upvotes: 1

Related Questions