CODEWITHSUNDEEP
reactjsfirebase
idlehand
idlehand

Reputation: 421

React/Firebase saving and accessing a value

I'm very new to React and I'm building a voting web-app which allows the user to input someone's name and add them onto the page. Once they are on the page, there are two icons next to the person name, an upvote and downvote. I'm seeing the people being posted to firebase and seeing my votes element set to 0, which I do manually, but I'm not sure if I'm accessing it or influencing a change on that variable at all, as I don't see it change on Firebase.

When the person is added to firebase:

addPlayer(player){
this.database.push().set({ playerContent: player, votes: 0});
}

Like I said, this info above is showing up on Firebase for me instantly when I add a person. Under the person it says votes: 0. Then I add the content to the page:

render(props){
    return(
        <div className="player fade-in">
            <span className="upbtn">
            x
            </span>
            <p className="playerContent">{ this.playerContent }</p>
            <span className="downbtn" 
            onClick={() => this.handleDownvote(this.playerId)}>
            &times;
            </span>

        </div>
    )
}

Here is handleDownVote:

    handleDownvote(id){
    this.props.downvotePlayer(id)
}

And the function:

downvotePlayer(playerId){
this.database.child(playerId).votes--;
}

If other code is needed, I'll link the repository

Upvotes: 0

Views: 57

Answers (1)

Alexander Vitanov
Alexander Vitanov

Reputation: 4141

You are not influencing the data. You should use transactions because they prevent data loss/corruption when accessed by many users at the same time. Try this: 

downvotePlayer(playerId){
    this.database.child(playerId).transaction(function (player) {
        if (player) {
            player.votes--
        }
        return player;
    });
}

Upvotes: 1

Related Questions