React is mapping duplicate posts

Question

like this

Ideally im just looking to map the likes array.

  {myLikes.map(like =>     

   )}

within the posts, i don't want duplicates posts. How would i achieve that ?

PostList.js

    render(){
        const {posts, myLikes} = this.props;
        return (    
        <div>
            {posts.map(post => (
                <div>
                {myLikes.map(like =>  
                <Paper key={post.id} style={Styles.myPaper}>        
                        <PostItem  

                            myLikes={like}                 
                            myTitle={this.state.title} 
                            editChange={this.onChange} 
                            editForm={this.formEditing} 
                            isEditing={this.props.isEditingId === post.id} 
                            removePost={this.removePost} 
                            {...post} 
                            // {...like}
                        />         

                </Paper>
                )}
                </div>
            ))}
        </div>
        )
    }
}
const mapStateToProps = (state) => ({
    isEditingId: state.post.isEditingId,
    myLikes: state.post.likes // reducer likes 
})

Posts

Likes

Remove duplicate values from the array before using map() , if you are using lodash, try uniqBy() to remove duplicate value. — Bharath
– Bharath, Commented Apr 26, 2019 at 17:54
is the problem that you have duplicate posts in array or that the react is rendering one post twice ? — Maielo
– Maielo, Commented Apr 26, 2019 at 17:55
react is rendering one post twice. Yes correct. in the console.log their 2 posts not 4. Its the map thats making it do it — Mr Patel
– Mr Patel, Commented Apr 26, 2019 at 17:56

GregL · Accepted Answer · 2019-04-26 17:57:20Z

4

This is actually what you told React to do, without realizing it.

I'm assuming that myLikes is an array of numbers, in this case [32, 15].

Your code says (in pseudocode form):

for each post p
    for each like l
        render the post p with like l

That gives you 2 * 2 = 4 copies.

answered Apr 26, 2019 at 17:57

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

1 Comment

Mr Patel Over a year ago

thank you, what will be the right way to do it. without duplicate post items

Tahir Iqbal · Accepted Answer · 2019-04-26 18:33:32Z

1

this is due to nested maps in the PostList component, you can merge the mylikes and post arrays first and then use map

How to merge multiple arrays

this is how it will work

const results = _.merge(myLikes, posts);
return (
  <div>
    {results.map(result => (
      <Paper key={result.id} style={Styles.myPaper}>
        <PostItem
          myLikes={result.like}
          myTitle={this.state.title}
          editChange={this.onChange}
          editForm={this.formEditing}
          isEditing={this.props.isEditingId === post.id}
          removePost={this.removePost}
        />
      </Paper>
    ))}
  </div>
);

edited Apr 26, 2019 at 18:33

answered Apr 26, 2019 at 18:25

Tahir Iqbal

3231 silver badge10 bronze badges

7 Comments

Mr Patel Over a year ago

getting post is not defined.

Mr Patel Over a year ago

result.id how do i know if not using the myLikes id, know what i mean ?

Tahir Iqbal Over a year ago

you can import _ from lodash

Mr Patel Over a year ago

also how do i know if result.id is not using myLikes.id ?

Tahir Iqbal Over a year ago

can you send me the actual array i.e posts and myLikes, so i will update my answer again

|

Collectives™ on Stack Overflow

React is mapping duplicate posts

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related