CODEWITHSUNDEEP
reactjsfirebaseredux
Stefan Pakic
Stefan Pakic

Reputation: 66

setState => Dont spread array if empty - React

handleCommentChange = (e) => {
    const commentID = idGenerator();
    this.setState({
        movie: {
            movieId: this.props.match.params.id,
            ...this.props.movie,           
            comments:[
                ...this.props.movie.comments,
                {     
                    commentID: commentID,
                    by:this.props.profile.firstName,                   
                    userID: this.props.auth.uid,
                    createdAt: new Date(),
                    comment: e.target.value               
                }               
            ]
        },


        profile:{
            ...this.props.profile,
            comments:[
                ...this.props.profile.comments,
                {                              
                    movieId: this.props.match.params.id,
                    commentID: commentID,                                             
                    createdAt: new Date(),
                    comment: e.target.value               
                }
            ]                           

        }
    })
}

That's code for adding comments, in two firebase collections... Everything works great if "this.props.movie.comments" have items in an array... The problem begins if that array is empty.

How can I skip that spreading function if that array is empty?

Am I doing this in the right way?

Thanks

Upvotes: 0

Views: 928

Answers (2)

lecstor
lecstor

Reputation: 5707

I opt for this when needed..

...(this.props.movie.comments || []),

Upvotes: 1

petertag
petertag

Reputation: 61

The easiest way to do it would be a null check I think, since an empty array can still be spread, either in the constructor or in here. You can do it without code duplication by setting a local constant to either the array, or an empty array.

const movieComments = this.props.movies ? this.props.movies : [];
this.setState({
    movie: {
        movie: {
        movieId: this.props.match.params.id,
        ...this.props.movie,           
        comments:[
            ...movieComments,
            {     
                commentID: commentID,
                by:this.props.profile.firstName,                   
                userID: this.props.auth.uid,
                createdAt: new Date(),
                comment: e.target.value               
            }               
        ]
    },
    profile:{
        ...this.props.profile,
        comments:[
            ...this.props.profile.comments,
            {                              
                movieId: this.props.match.params.id,
                commentID: commentID,                                             
                createdAt: new Date(),
                comment: e.target.value               
            }
        ]                           

    }
});

The same thing is possible for this.props.profile.comments in case you have the same behavior there. Generally, I'd make sure that it was always passed either an empty array or a populated array, rather than passing null as a prop.

Upvotes: 1

Related Questions