scabiosa scabiosa - 2 months ago 16
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,
}))
this.props.fetchCommentById(id)
}


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,
}))
this.props.fetchCommentById(id)
}


.........

<Modal
className='modal'
overlayClassName='overlay'
isOpen={editCommentModalOpen}
onRequestClose={this.closeEditCommentModal}
contentLabel='Modal'
>
<div>
<EditComment />
<button onClick={() => this.closeEditCommentModal()}>Close</button>
</div>
</Modal>


...............

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({
  validate,
  form: 'CommentEditForm',
  enableReinitialize : true // you need to add this property
})(EditComment)