How to connect nested map functions inside container?

Question

I am a little stuck in here, so basically the problem is with the nested map function. I have main map function which provides me a list of all hotels ever added to the database. Inside that map function, I must have a nested map of reviews for specified hotel but, the problem is with the same keys. In main map function, I have keys like, id, name, etc. As for the nested review map, I have id, which is basically different from the id provided in main map so I'm stuck while trying to connect them.

Here's my code:

<div>
            <div className='landing-container'>
                <nav>
                    <h2>Hotel Challenge</h2>
                    <ul>
                        <li><a className="nav-link" onClick={loadHotels}>List All Hotels</a></li>
                        <li><Link className='nav-link' to='/dashboard'>Dashboard</Link></li>
                        <li><Link className='nav-link' to='/favorites'>Favorites</Link></li>
                        <li><a className="nav-link" onClick={handleLogout}>Logout</a></li>
                    </ul>
                </nav>
            </div>
            <div className="layout-container">
                <div>{hotelItems.map((item) => (
                    <div className="hotel-container" key={item.id}>
                        <div className="hotel-name">
                            {item.name}
                            <div className="hotel-location">{item.city}, {item.country}</div>
                            <div className="hotel-stars">
                                {Array(item.stars).fill(<FontAwesomeIcon className="icon-color-star" icon={faStar} />)}
                            </div>
                            <img className="hotel-image" src={item.image} />
                            <div className="reviews">
                                <button className="review-button" onClick={showHotelReviews}>Show Reviews</button>
                                {hotelReviews.map((review) => (
                                    <div>
                                        <div className="review-message">{review.id}</div>
                                        <div className="review-likes">Liked by: <span>{review.likes}</span><sup><FontAwesomeIcon className="icon-color-likes" icon={faHeart} /></sup></div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                ))}</div>
            </div>
        </div>

I tried providing the main map key to the nested map, but that didn't work either.

All hotels in array:

[
    {
        "id": 42,
        "name": "Courtyard by Marriott Belgrade City Center",
        "city": "Belgrade",
        "country": "Serbia",
        "image": "http://127.0.0.1:8000/media/images/54129602.jpg",
        "stars": 4,
        "date": "2017-11-15 00:03:32",
        "description": "Lorem Ipsum",
        "price": 52.0,
        "likes": 45,
        "dislikes": 2,
        "user": [
            1,
            73
        ],
        "location": "44.8170754,20.4580087"
    },
]

Reviews Array:

[
    {
        "id": 1,
        "message": "“Very comfortable.”",
        "created_at": "2020-08-13T18:10:56.240421Z",
        "likes": 5,
        "dislikes": 0,
        "positive": true,
        "author": {
            "id": 1,
            "first_name": "First Name",
            "last_name": "Last Name"
        }
    }
]

It would be helpful to have the exact data structure of the hotelItems and hoteReviews arrays — Mathieu
– Mathieu, Commented Aug 31, 2020 at 11:54

Daniel Geffen · Accepted Answer · 2020-08-31 12:04:48Z

1

It would probably be better to split this into a different components (something like Hotel). With that you can have different keys for hotels and reviews - you can keep your current ids for hotels, while using id for reviews in the Hotel component.

answered Aug 31, 2020 at 12:04

Daniel Geffen

1,8721 gold badge12 silver badges17 bronze badges

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

3 Comments

ravenousHydra Over a year ago

Tried it, but nothing. I was about to refactor my code, it was messy, so I did it. I didn't solved it yet.

Daniel Geffen Over a year ago

Can you explain more about what exactly isn't working?

ravenousHydra Over a year ago

Basically, I want to map reviews inside my main hotels map container.. The part that works is that it displays me all messages from reviews inside every single container. So I want to connect review id -> item.id [ item.id ] = hotel-id

CFLS · Accepted Answer · 2020-08-31 15:31:04Z

0

Probably some info on ReviewsArray is missing: a "foreign key" to Hotels. Something like:

[
    {
        "id": 1,
        "message": "“Very comfortable.”",
        "created_at": "2020-08-13T18:10:56.240421Z",
        "likes": 5,
        "dislikes": 0,
        "positive": true,
        "author": {
             "id": 1,
             "first_name": "First Name",
             "last_name": "Last Name"
        },
        "hotel_id": id <------ "foreign key" id here
    }
]

And, in this way, you could filter the list before map:

hotelReviews.filter((review) => review.hotel_id == item.id).map((review) => (code here))

If I understood your problem correctly, is difficult to know the hotel being reviewed given a review without this type of information. Maybe this info exist but is masked inside another information.

answered Aug 31, 2020 at 15:31

CFLS

3551 silver badge9 bronze badges

3 Comments

ravenousHydra Over a year ago

There's all I've got, maybe it's under author object?

CFLS Over a year ago

not sure. Do you have an example of hotel object and some reviews for this specific hotel?

ravenousHydra Over a year ago

Nothing like it! Maybe it must be mapped inside every container. I didn't saw nowhere that I need to map a review per hotel, but that is not logical..

Collectives™ on Stack Overflow

How to connect nested map functions inside container?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related