How to prepend an item / div with "this.props.x.map()"

help
1

Hi guys, im struggling hard with a simple thing, but im not able to solve it.

Im getting the info from the DB with a simple map. The thing is i need to prepend each item, but im not able to do it.
This is the map iteration and…

{this.props.randomCollection.map((DB) => {
    return (
        <div>
               // ...
        </div>
    )
                                                            
})}

This is how looks like my createcontainer:

export default createContainer(() => {

        let P_randomCollection = Meteor.subscribe('randomCollection');
	
	return {
            randomCollection: randomCollection.find({}, { sort: { joinedAt: -1 }}).fetch(),
	}
}, App);

I mean with the sort thing i can prepend an item, but still dont works as i really want. I will let you guys a simple gif, i was trying some things but still didnt get the result.

Im sure some of you didnt really understand what im trying to say, cause im a bit confused with all this things, so i will show u a little gif right now:

Is weird because, the new info is prepended, but the animation still working like if not.

Not sure if i need to fix the css or what i really need to do,because as you see, the new info is shown up on the top, but the css still acting like if im appending.

Im a bit confused and im sure you guys willl not be able to help me at all, cause well the info that im telling you is not clear at all, but the thing is i will like to have the “add css effect” or prepend items in the this.props.map().

Thanks you all, hope someone can help me a bit.

Edit: And i cant use .prepend() inside the .map() because seems like it prepends a single item / a lot of items, each second, without stop.

2

I don’t get it. So you add new users, they show up in the list, and you get a cool entry animation on them, but you’re still not happy? :confused:

3

Is this supposed to be an answer?

Thanks @herteby but not sure why are you asking this type of questions.
Have a good day

4

Hi @Hanna_92,

I can only guess, but maybe this happens because you are not providing a key attribute to your <div> elements? Normally, React should complain about this on the console.

React is trying to re-use DOM nodes where this is possible, so it relies on these keys to decide whether a particular element can be re-used or not. This might lead to the phenomenon you are experiencing.

More on this here: https://discuss.reactjs.org/t/how-does-react-decide-whether-to-reuse-an-existing-component/571

1 Like
5

Hey @waldgeist it works! Thanks a lot man, i was like 2 weeks struggling with that simple thing.

Thanks you, lesson learned!

1 Like