Geek Answers Handbook

React: rendering a list in reverse order

I am building an application with React and Reflux, and I am trying to display a list of elements in a specific order.

Elements are custom Post components that appear in reverse chronological order, so the last entry is at the top of the list.

I use the TimeoutTransitionGroup Khan Academy to make the list items disappear and disappear.

The problem that I see is that when I add a new message and the component receives the updated list through the new details, the transition occurs from the last element in the list, and not from the first. I would like to have it so that the first element fades, since this is the position of the new element that was added.

Message 2 <- This message was added recently.

Message 1 <- This message disappears in

Is there a way to specify the same order of elements, but do them in reverse order or something like that?

This is my component render function:

    if (!(this.props.posts && this.props.ordering)) return false;
    var posts = this.props.ordering.map(function(postId, index) {
        return <Post key={index} post={this.props.posts[postId]}/>;
    }, this);
    return (
        <div className="post-collection">
            <TimeoutTransitionGroup 
                enterTimeout={500}
                leaveTimeout={500}  
                transitionName="postTransition">
                {posts}
            </TimeoutTransitionGroup>
        </div>
    );

This is the CSS transition:

.postTransition-enter {
    opacity: 0;
    transition: opacity .25s ease-in;
}

.postTransition-enter.postTransition-enter-active {
    opacity: 1;
}

.postTransition-leave {
    opacity: 1;
    transition: opacity .25s ease-in;
}

.postTransition-leave.postTransition-leave-active {
    opacity: 0;
}

Any help would be greatly appreciated!

+4
source share
2 answers

You should not use the index as keyit defeats the goal. For example, if you add an element to the beginning of the array, the reaction will detect only one new key - the last one. All other components will be matched according to their keys. Instead, use a unique message identifier as the key.

+14
source

, , op , . , .

var NotesList = React.createClass({
render: function () {
    var notes = this.props.notepad.notes;

    return (
        <div className="note-list">
            {
                notes.reverse().map(function (note) {
                    return (
                        <NoteSummary key={note.id} note={note}/>
                    );
                })
            }
        </div>
    );
}
});
+3

More articles:


All Articles