0

In my main component App.js, I have an array of data received from a redux store that looks like this:

[
   {...}, {...}
]

Each object in the array contains information about a post (like a reddit post) that I map over to display as a preview card. Upon clicking that preview card, a modal card will display with a detailed view of the post. 

// From App.js: 
return (
    <div className="entirePostList">
        <NavBar />
        <div className="postListContainer">
            <div className="postListRow">
                {posts.map((post) => (
                    <div key={post.id} onClick={this.openDetailsPostModal}>
                        <PostCard post={post} />
                    </div>
                ))}
            </div>
        </div>
        <button className="newPostButton"
                onClick={this.openCreatePostModal}>
            <MdAddCircle />
        </button>

        <Modal // VIEW POST DETAILS MODAL
          className='modal'
          overlayClassName='createOverlay'
          isOpen={detailsPostModalOpen}
          onRequestClose={this.closeDetailsPostModal}
          contentLabel='Modal'
        >
            <div>
                {loadingDetailsPost === true
                    ?   <div>
                            <div className="postEditorBg" />
                            <Loading type='bubbles' 
                                     delay={200} 
                                     color='#fed80a' 
                                     className="loading"
                                     width={120} />
                        </div>
                    :   <div>
                            <div className="postEditorBg" />
                            <PostCardDetails />
                        </div>
                }
            </div>
        </Modal>

In the <PostCardDetails /> component, I am receiving the same array of data from the redux store and mapping over it in the same way to display the data as UI. It displays correctly, but the problem is when I click a card preview, it displays the wrong detailed card (not the one you would expect based on the preview).

Here's the github repo in case more context is needed.

I'm beyond stuck on this - person who can answer this shall receive love and respect for eternity.

Ty Hopp
  • 55
  • 8
  • 1
    I'm not sure if this is your issue but it looks like your `PostCardDetails` component is using `posts.map` which I think is not right. You should store the currently clicked modal post on the local state and then pass this saved post to PostCardDetails as property. Please have a look at this [github repo](https://github.com/AWolf81/quoted). I've changed the API call to static data because I don't have the API server. If this is the problem I'll add an answer with more details to the problem. – AWolf Nov 06 '17 at 23:36
  • @AWolf you a gentleman/woman and a scholar. Your solution worked perfectly. Also the fact that you were able to work this out even though I forgot to push the server to the github repo is incredible Faith in humanity restored. – Ty Hopp Nov 07 '17 at 01:11

0 Answers0