Redux Form can't edit user profile - reactjs

Question

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
)
);

Answer 1

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,
},
};
}

Answer 2

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.