I am trying to initialize the value in the redux form , i got the those values from the state but in the form(input) field it is not implementing.
class PlaylistUpdateForm extends Component {
constructor(props) {
super(props);
}
renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="input-row">
<label>{label}</label>
<input {...input} type={type} className="form-control" />
{touched && error && <span className="error">{error}</span>}
</div>
);
submit = (values) => {
const playlistObject = {
name: values.name,
detail: values.detail,
_id: values._id
};
this.props.updatePlaylist(playlistObject);
this.props.history.push('/');
};
render() {
const { handleSubmit, initialValues } = this.props;
console.log(initialValues);
return (
<form onSubmit={handleSubmit(this.submit)}>
{this.props.errors.message && <div className="alert alert-danger">{this.props.errors.message}</div>}
<Field
name="name"
label={'Playlist Name'}
component={this.renderField}
type="text"
className="form-control"
/>
<Field
name="detail"
label={'Detail'}
component={this.renderField}
type="text"
className="form-control"
/>
<button type="submit" className="btn btn-success">
Update My Playlist
</button>
</form>
);
}
}
function mapStateToProps(state) {
return {
errors: state.errors,
playlists: state.playlists,
currentPlaylist: state.playlists.currentPlaylist,
initialValues: { ...state.playlists.currentPlaylist }
};
}
export default connect(mapStateToProps, { updatePlaylist, clearCurrent })(
reduxForm({ form: 'playlistUpdate', enableReinitialize: true })(PlaylistUpdateForm)
);