scabiosa scabiosa - 1 year ago 75
React JSX Question

React Redux updating state involving parent and child component

enter image description hereI am working on a blog page where you can click on a button and open a modal to edit the comment under the post.

On the Post Details Page I have:

openEditCommentModal = (id) => {
this.setState(() => ({
editCommentModalOpen: true,

On the edit comment file I have:

const mapStateToProps = state => {
return {
initialValues: state.commentContainer.selectedComment

So I do two things:
1. open modal
2. call fetchCommentById(id) so that I can update the state.commentContainer.selectedComment

Post Details page is the parent component, and the edit comment form is the child component.

I need to give initialValue to the edit form. The initialValue is the original content of the comment, and then user can edit it.

Weird thing is that when I click the edit button the first time, NO initialValue. It's an empty object. Therefore I have an empty form.
When I close the modal and re open it, initialValue is being updated to be the comment I want, and the edit comment form is now having all the original content.

I don't understand why openEditCommentModal cannot update the state the first time. Can anyone help?

On Post Details page:

openEditCommentModal = (id) => {
this.setState(() => ({
editCommentModalOpen: true,


<EditComment />
<button onClick={() => this.closeEditCommentModal()}>Close</button>


const mapDispatchToProps = dispatch => {
return {
fetchByPostId: id => dispatch(fetchByPostId(id)),
deleteByPostId: id => dispatch(deleteByPostId(id)),
deleteByCommentId: id => dispatch(deleteByCommentId(id)),
vote: (id, option) => dispatch(vote(id, option)),
fetchComments: id => dispatch(fetchComments(id)),
fetchCommentById: id => dispatch(fetchCommentById(id))

Answer Source

I have checked your code and searched for your problem and i have found this answer that you have to enable the initialization of you form to be bind with your data so what you need to do:

EditComment = reduxForm({
  form: 'CommentEditForm',
  enableReinitialize : true // you need to add this property
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download