Using Reactjs to align and display results based on Contestant ID - reactjs

Question

The code below displays three Election Contestants from the arrays.
Now I want to show their vote counts for each contestanst based on their Ids.
here is the arrays showing various contestant results that i want to merge based on their Id's
contestantResult: [
{ id: 1, voteCount: "500 Votes" },
{ id: 2, voteCount: "200 Votes" },
{ id: 3, voteCount: "320 votes" },
],
My issues is stated below:
Each time I run the code, all the three contestant are seen having 500 votes but in reality based on their Ids,
Contestant 1 should have 500 votes.
Contestant 2 should have 200 votes.
Contestant 3 should have 320 votes.
I guess I have to loop through the contestant Vote results arrays using something like map() functions as per the code below but do not know
how to apply it. Any help or solutions will be appreciated
{this.state.contestantResult.map((contestant, i) => {
//if (contestant.id == person.id) {
if (contestant.id) {
return (
<div key={i}>
<div>{contestant.voteCount}</div>
</div>
);
}
})}
Below is my coding efforts so far
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class Contestant extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<div style={{ background: "black", color: "white" }}>
<b>Id:</b>
{this.props.data.id}
<br />
<b>Name:</b> {this.props.data.name}
<br />
<b style={{ color: "red" }}>Vote Count: {this.props.resultVotes}</b>
<br />
</div>
</div>
</React.Fragment>
);
}
}
class VoteResult extends React.Component {
constructor() {
super();
this.state = {
data: [
{ id: 1, name: "contestant 1" },
{ id: 2, name: "contestant 2" },
{ id: 3, name: "contestant 3" }
],
contestantResult: [
{ id: 1, voteCount: "500 Votes" },
{ id: 2, voteCount: "200 Votes" },
{ id: 3, voteCount: "320 votes" }
]
};
}
componentDidMount() {}
render() {
return (
<div>
<h1> Electoral College Voting......</h1>
{this.state.data.map(person => {
return (
<Contestant
key={person.id}
data={person}
resultVotes={this.state.contestantResult[0].voteCount}
/>
);
})}
</div>
);
}
}

Answer 1

You don't want to take the first object in the contestantResult array for every iteration in the loop. You could instead use find to find the result of the correct contestant.
{this.state.data.map(person => {
const result = this.state.contestantResult.find(res => res.id === person.id);
return (
<Contestant
key={person.id}
data={person}
resultVotes={result.voteCount}
/>
);
})}
class VoteResult extends React.Component {
state = {
data: [
{ id: 1, name: "contestant 1" },
{ id: 2, name: "contestant 2" },
{ id: 3, name: "contestant 3" }
],
contestantResult: [
{ id: 1, voteCount: "500 Votes" },
{ id: 2, voteCount: "200 Votes" },
{ id: 3, voteCount: "320 votes" }
]
};
render() {
const { data, contestantResult } = this.state;
return (
<div>
<h1> Electoral College Voting......</h1>
{data.map(person => {
const result = contestantResult.find(res => res.id === person.id);
return (
<Contestant
key={person.id}
data={person}
resultVotes={result.voteCount}
/>
);
})}
</div>
);
}
}
class Contestant extends React.Component {
render() {
return (
<div key={this.props.data.id}>
<div style={{ background: "black", color: "white" }}>
<b>Id:</b>
{this.props.data.id}
<br />
<b>Name:</b> {this.props.data.name}
<br />
<b style={{ color: "red" }}>Vote Count: {this.props.resultVotes}</b>
<br />
</div>
</div>
);
}
}
ReactDOM.render(<VoteResult />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>