Functionality: Homepage pulls a message array from the server and displays it on the screen, one message at a time with next & previous arrows to navigate. User has the option to click a message & open corresponding Message Detail modal, which also has previous & next arrows to navigate between them & an action button for that specific message.
If user click on action button, it sends the request to server & gets the updated MessageDetail for that modal.
Code :
const messageNumber = this.props.messages[this.state.selectedIdx].messageNumber;
Here, messages is an array & we pass the index selected by user in [this.state.selectedIdx] initially.
When user clicks on an action button, then updated data for messages comes from server to "this.props.messages" while the box is still open. However, "this.state.selectedIdx" is undefined now which throws an error. So, how should I maintain the value for this.state.selectedIdx so that it is saved in the Message Detail modal?