Updating state not reflecting correctly in UI

Question

I am working on an application that allows users to post and like messages on a page. The application orders the posts from newest to oldest. The issue I am running in to is, if for example there are ten posts on the page and the top one is liked, and then a new post is created - the new post is added to the top of the page and the likes from the previous topmost post carries over to the new post (which should have zero likes by default) - incorrectly rendering likes on the page.

Note, posts and likes are updated correctly on the server side and the state is updated correctly to reflect these changes, but the state and the UI aren't in sync as they should be following the execution of the onSubmit() method in the CreatePostForm component.

Did anyone else run into a similar issue? I appreciate any suggestions on how to resolve.

PostsPage.js

class PostsPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            posts: [],
            user: this.props.auth.user,
            location: "main"
        };

        this.loadPosts = this.loadPosts.bind(this);
        this.loadPosts();
    };


    loadPosts() {

        this.props.loadPostsRequest(this.state).then(
            (results) => {
                console.log(results.data.posts);
                this.setState({
                    posts: results.data.posts
                });
            });
    }



    render() {
        const { createPostRequest } = this.props;

        const posts = this.state.posts.map( (post, i) =>
            <Post     
                loadPostsRequest={loadPostsRequest}
                key={i}
                postId={post.postId}
                userId={this.state.user.userId}
                content={post.postBody}
            />
        );

        return (
            <div className="container-fluid" id="posts-container">
                <div className="row">
                    <div className="col-md-4 col-md-offset-4 posts-wrapper">

                        <div id="create-post-form">
                            <CreatePostForm
                                createPostRequest={createPostRequest}
                                history={this.props.history}
                                loadPosts={this.loadPosts}
                            />
                        </div>
                        { posts }
                    </div>
                </div>
            </div>
        );
    }
}

CreatePostForm.js

export class CreatePostForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            postBody : "",
            user: this.props.auth.user
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            [e.target.name] : e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();

        this.props.createPostRequest(this.state).then(
            () => {
                this.props.loadPosts();
            })
    }

    render() {

        return (
            <div className="create-post-inner col-md-12">
                <form id="createPost" onSubmit={ this.onSubmit } >
                    <textarea value={this.state.postBody} className="form-control postInput" name="postBody" onChange={ this.onChange } placeholder="Write something on this page..." >
                    </textarea>
                    <input type="submit" className="submit btn btn-primary" />
                </form>
            </div>
        );
    }
}

Answer 1

Don't use index for a key in your posts map. When a new post shows up the new post has the same key as the previous post so React treats it as the same element. Assuming postId is unique to each post, use that instead.

https://facebook.github.io/react/docs/lists-and-keys.html