Toggle divs background color

Question

I map the div so that it displays based on the amount of data that I have in my database. In my case, my div gives 4 times. (This is a survey that has 4 options.)

I will explain my question in stages.

1) I want to set the background color for the div, which corresponds to the identifier that I get from the database when the page loads. I did it like this:

    componentDidMount() {

            let sel3 = document.getElementById(this.props.voted_id);

            if (sel3) {

                sel3.style.backgroundColor = "#0b97c4";
                sel3.style.color = "#FFFFFF";
            }
        }

here this.props.voted_idis the identifier that I get from the database. (This is the user ID of the survey that the user selected. So on componentDidMount I show the selected option by setting the background color for it)

2) , , . , . :

render() {

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

        return (

            <div className="txt_vote_bar_div" id={this.props.contents.post_poll_content_id}>
                <p className="txt_vote_choice" id={this.props.contents.post_poll_content_id}
                   onClick={() => {
                       this.handleClick(this.props.contents.post_poll_content_id);
                   }}>
                    {contents.content}
                </p>
                <p className="txt_tot_votes"> {this.props.contents.votes_percentage}%
                    ({this.state.voteCount} Votes)</p>
            </div>
        );
    };

handleClick

 handleClick(id) {

        let sel = document.getElementById(this.props.voted_id);
    if (sel) {
        alert("1");
        sel.style.backgroundColor = "#FFFFFF";
        sel.style.color = "#6a6a6a";
    }

    let sel2 = document.getElementById(this.props.getVoteStatus);
    if (sel2) {
        alert("2");
        sel2.style.backgroundColor = "#FFFFFF";
        sel2.style.color = "#6a6a6a";
    }

    let el = document.getElementById(id);
    if (el) {
        alert("3");
        this.setState({

            active: false,

        })
        el.style.backgroundColor = "#0b97c4";
        el.style.color = "#FFFFFF";
    }



    let sel3 = document.getElementById(id);
    if (sel3.id == this.props.getVoteStatus && this.state.active == false) {
        alert("4");
        this.setState({
            active: true,
        })
        sel3.style.backgroundColor = "#FFFFFF";
        sel3.style.color = "#6a6a6a";
    }

    }

this.props.voted_id - , ( componentDidMount)

this.props.getVoteStatus - , , , .

.

, , div . . ( )

, ( div , )

let sel = document.getElementById(this.props.voted_id);
        if (sel) {
            alert("2");
            sel.style.backgroundColor = "#FFFFFF";
            sel.style.color = "#6a6a6a";
        }

let el = document.getElementById(id);
        if (el) {
            alert("1");
            this.setState({
                active: false,
            })
            el.style.backgroundColor = "#0b97c4";
            el.style.color = "#FFFFFF";
        }

. . . ?

UPDATE

div

export const TextVoteList = ({postData, submitvote}) => {

    const dataUnavailable = (
        <div>
            <p>
                There are no voting options available available
            </p>
        </div>
    );

    const dataAvailable = (
        <div>
            {postData.post_poll_content.map(contents => <TextVoteOptions key={contents.post_poll_content_id} voted_id={postData.personal_vote}  contents={contents} submitvote = {submitvote} postId = {postData._id}/>)}
        </div>
    );

    return (

        <div>
            {postData.post_poll_content.length === 0 ? dataUnavailable : dataAvailable}
        </div>

    );
};

TextVoteOptions code

render() {

        alert(this.props.getVoteResponse);

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

        return (


            <div key={this.props.contents.post_poll_content_id} className= {(this.state.voted_id === this.props.contents.post_poll_content_id && this.state.active)  ? "txt_vote_bar_div active" :  "txt_vote_bar_div"}>
                <p className="txt_vote_choice" id={this.props.contents.post_poll_content_id}
                   onClick={() => {
                       this.handleClick(this.props.contents.post_poll_content_id);
                   }}>
                    {contents.content}
                </p>
                <p className="txt_tot_votes"> {this.props.contents.votes_percentage}%
                    ({this.state.voteCount} Votes)</p>
            </div>
        );
    };

handleClick(id) {

        let vote_object = {
            voting_object: id,
            post_id: this.props.postId
        }

        this.setState({
            voted_id: id,
            active: (id != this.state.voted_id) ? true : !this.state.active
        });


        this.props.submitvote(vote_object);

    }

Answer 1

DOM . React DOM. , , . , . , .

'active', . , .

const contents = [
  {
    post_poll_content_id: 1,
    content: "Soccer",
    votes_percentage: 60
  },
  {
    post_poll_content_id: 2,
    content: "Cricket",
    votes_percentage: 20
  },
  {
    post_poll_content_id: 3,
    content: "Basketball",
    votes_percentage: 20
  }
];

const votedId = 3; // Assume this is coming from database;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      voteCount: 100,
      voted_id: props.voted_id,
      active:true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(id) {
    this.setState({
        voted_id: id,
        active: (id != this.state.voted_id) ? true : !this.state.active
    });
    
  }

  render() {
   let {contents, voted_id} = this.props;
    return (
      <div>
        {contents.map((content, index) => {
          return (
            <div key={index} className= {(this.state.voted_id===content.post_poll_content_id && this.state.active)  ? "txt_vote_bar_div active" :  "txt_vote_bar_div"}
                 id={content.post_poll_content_id}
            >
              <p
                className="txt_vote_choice"
                id={content.post_poll_content_id}
                onClick={() => {
                  this.handleClick(content.post_poll_content_id);
                }}
              >
                {content.content}
              </p>
              <p className="txt_tot_votes">
                {content.votes_percentage % this.state.voteCount} Votes
              </p>
            </div>
          );
        })}
      </div>
    );
  }
}
ReactDOM.render(<Demo contents={contents} voted_id = {votedId}/>, document.getElementById("app"));

.txt_vote_bar_div {
   display:block;
   border:1px solid #eee;
   margin: 10px;
   width:20%;
   text-align:center;
}

.active {
  background-color:#0b97c4;
  color:#FFF;
}

.txt_vote_choice {
   color:'blue';
   cursor:pointer;
   text-decoration:underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Hide result