Mapping an array inside an object in React with ES6

Question

I'm making a react-feed app, inspired by Michael's tutorial (there's also a video) and I encountered some trouble trying to pass an array inside an array as props using Lodash's _.map function. This is the information I'm mapping:

const events = [ 
                {
                    event: 'Gods',
                    venue: 'Asgard',
                    venuePicture: 'picture1.jpg',
                    when: '21:00 27/04/16',
                    genres: ['rock', 'funk'],
                    artists: [
                        {
                            artist: 'Thor',
                            artistPicture: 'thor.jpg'
                        },

                        {
                            artist: 'Loki',
                            artistPicture: 'loki.jpg'
                        }
                    ]

                },

                {
                    event: 'Humans',
                    venue: 'Midgard',
                    venuePicture: 'picture2.jpg',
                    when: '21:00 27/04/16',
                    genres: ['jazz', 'pop'],
                    artists: [
                        {
                            artist: 'Human1',
                            artistPicture: 'human1.jpg'
                        },

                        {
                            artist: 'Human2',
                            artistPicture: 'human2.jpg'
                        }
                    ]

                }


             ];

I'm passing to the component like this (this works):

renderItems(){
        const props = _.omit(this.props, 'events');

        return _.map(this.props.events, (event, index) => <EventsFeedItem key={index} {...event} {...props}/>);

    }

    render() {
            return (
                <section>
                    {this.renderItems()}
                </section>
            );
        }

This works perfectly fine, dividing each "event" object

Then I try to destructure and map the "artists:" object of each event like this:

renderArtists() {

        const { event, venue, venuePicture, when, genres, artists } = this.props.events;

        const props = _.omit(this.props, 'events');
        return  _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

    }

    render() {
        return (
            <ul>
                {this.renderArtists()}
            </ul>
        );
    }

This is the result I'm getting, which is close, but not what I need:

I need to separate these further to get:

{artist: "Thor"} {artistPicture: "thor.jpg"}
{artist: "Loki"} {artistPicture: "loki.jpg"}

and so on...

I see there's a pattern here, I just don't know how to implement it further. It breaks when I try to repeat the same destructure then _.map thing. Can anyone please give me a hand with this, sorry for the long post.

what about using _.get? I think it will serve purpose, also could you uplod this to jsbin or some good place where we could test this? — ArchNoob
– ArchNoob, Commented Apr 24, 2016 at 18:05

Bergi · Accepted Answer · 2016-04-24 20:55:55Z

1

return _(this.props.events).flatMap('artists').map((artist, index)=><ItemArtist key={index} {...artist} {...props}/>).value();

edited Apr 24, 2016 at 20:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Apr 24, 2016 at 19:01

VyvIT

1,09810 silver badges13 bronze badges

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

2 Comments

Vlady Veselinov Over a year ago

Your first comment (the one you deleted) solved my problem VyvIT, thanks a lot! I can't believed I spent all this time and I didn't notice it :D

VyvIT Over a year ago

No problem, here's a solution to flatMap the artists from the initial events array.

Community · Accepted Answer · 2017-05-23 11:55:07Z

0

Oh, I found the problem thanks to VyvIT's comment (he deleted his comment), it's here:

const { event, venue, venuePicture, when, genres, artists } = this.props.events;
    _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

"artists" shouldn't be destructured (curly brackets), should be like this:

_.map(artists, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

Thank you so much guys!

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Apr 24, 2016 at 18:52

Vlady Veselinov

5,5015 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

Mapping an array inside an object in React with ES6

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related