I am passing through a variable called 'homeTeam' and when console logged it outputs
abbreviation: "Uls"
id: "08ew458ius6f"
name: "Ulster"
A variable called 'awayTeam' outputs the same array but with data of a different team
I have a bit of code to find out if I need the homeTeam or awayTeam abbreviation;
const restartTeamAbbrevation = async (homeTeam, startTeamId, awayTeam) => {
if (startTeamId == {homeTeam.id} ) {
return homeTeam.abbreviation
} else {
return awayTeam.abbreviation
}}
I then want this value to appear on my front end, i am attempting to use the following code;
<Modal.Body>
<Row>
<Col>
<div className="d-flex">
<span className="py-1">Team: </span>
<span className="py-1">{ restartTeamAbbrevation() }</span>
</div>
</Col>
</Row>
</Modal.Body>
I am getting the error
Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id')
Because when you are calling that function, you are not passing the parameters like homeTeam, startTeamId, awayTeam, so when the function is called these values equals to undefined and when you try to access homeTeam.id inside the function, it gives you that error.
Try passing arguments to your restartTeamAbbreviation function. Something like this:
<Modal.Body>
<Row>
<Col>
<div className="d-flex">
<span className="py-1">Team: </span>
<span className="py-1">{ restartTeamAbbreviation(homeTeam, startTeamId, awayTeam) }</span>
</div>
</Col>
</Row>
</Modal.Body>
Also you have some strange condition, you might want to do this instead:
if (startTeamId === homeTeam.id ) ...
And one more thing, restartTeamAbbreciation function doesn't need to be async