Anwenden von Stil auf nur ein Div basierend auf Statusänderung

Question

Ich Rendere 4 Divs aus den Daten, die ich von meinem Backend bekomme. Ich färbe diese divs entsprechend einer Statusänderung. Bisher mache ich es erfolgreich, aber das einzige Problem ist, dass alle 4 divs auf diese Weise eingefärbt werden können. Ich möchte vorheriges div uncolor wenn ich ein anderes div färbe. Wie kann ich das machen?

Mein Code

textVote() { 

     this.setState({ 

      vote_status: !this.state.vote_status 

     }) 

    } 

handleClick(id) { 

     let vote_object = { 
      voting_object: id, 
      post_id: this.props.postId 
     } 
     this.props.submitvote(vote_object) 
     this.textVote(); 

    } 


render() { 

     console.log("getVoteStatus", this.props.getVoteStatus) 

     let {contents, submitvote, postId} = this.props 

return (

     <div className="txt_vote_bar_div" style={{backgroundColor: this.state.vote_status ? '#0b97c4' : 'white'}}> 
      <p className="txt_vote_choice" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}} 
       id={contents.post_poll_content_id} onClick={() => { 

        this.handleClick(contents.post_poll_content_id); 

        }}> {contents.content} </p> 
      <p className="txt_tot_votes" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}> 56% (Votes: {contents.votes}) </p> 
     </div> 
    ); 
    }; 

Wie kann ich es so nur ich ein div Hintergrundfarbe und Hintergrundfarbe entfernen, wenn i another.Thanks wählen.

Answer 1

Von dem, was ich verstehe, versuchen Sie, mehrere div zu haben, die, wenn Sie jedes div klicken, wird es Farbe ändern und gleichzeitig andere div wird zurück zu seiner Standardfarbe ändern. Habe ich recht?

Meine Lösung wäre so etwas. Spezifizieren Sie jede Komponente als Nummer.