How I can get post values in edit with React/Redux form in React

Question

I am making simple blog with react redux. As package I am using redux form I made events such as post,get,delete but I couldn't form edit because I can't getting values title and body in edit. I tried to solve it with initialize in componentwillMount but it is getting error to Cannot read property 'title' of undefined when I write this.props.edit.title in ComponentWillMount

How can I solve this problem, How I can get values in edit form

import React, { Component, PropTypes } from 'react';
import * as actions from '../../actions/index';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';
import {initialize} from 'redux-form';

class EditPost extends Component {
    componentWillMount(){
    this.props.dispatch(initialize('edit', { title: this.props.edit.title },    ['title', 'body'])); 

    this.props.EditPost(this.props.params.id);
    }

handleFormSubmit(formProps){
this.props.addPost(formProps);
this.context.router.push('/posts');
}
    render(){
      const {handleSubmit,fields:{title,body}} = this.props;
        if(!this.props.edit){
            return <div>Loading...</div>;
        }
        return (
            <div>
          <div className="row">
          <div className="col-md-12">
                <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                <fieldset className="form-group">
                  <label>Title:</label>
                  <input {...title} className="form-control" />
                  {title.touched && title.error && <div className="text-danger">{title.error}</div>}
                  </fieldset>
                <fieldset className="form-group">
                  <label>Body:</label>
                  <textarea {...body} className="form-control" ></textarea>
                  {body.touched && body.error && <div className="text-danger">{body.error}</div>}
                </fieldset>
                 <button className="btn btn-success">Add</button>
                </form>
          </div>
          </div>
            </div>
               );
    }

    }

function mapStateToProps(state) {
    return {
        edit:state.posts.edit
    }
}
export default reduxForm({
form:'edit',
fields:['title','body'],},mapStateToProps,actions)(EditPost);

this.props.edit is probably undefined. How do you pass these props? Can I see your reducer? Can you post a little more code? — glcheetham
– glcheetham, Commented May 31, 2016 at 10:07
Also note that when using ES6 class syntax you should be using a constructor instead of componentWillMount — glcheetham
– glcheetham, Commented May 31, 2016 at 10:09
hi , @glcheetham for your reply, I solved the problem in following way. — onerciller
– onerciller, Commented May 31, 2016 at 16:57

onerciller · Accepted Answer · 2016-05-31 16:59:54Z

2

I solved problem in following way. I can get the post values with initialValues: state.posts.edit

function mapStateToProps(state) {
    return {
        edit:state.posts.edit,
        initialValues: state.posts.edit
    }
}

answered May 31, 2016 at 16:59

onerciller

8101 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How I can get post values in edit with React/Redux form in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related