I would like to be able to push different images in to an array for different cases. Right now I'm trying to push an image of a ball for goal scorers in my project. But what returns is:
←Object HTMLImageElement→ Vardy J. - '55
Here is my function, I've commented where the image is:
import React from 'react'
import ball from './ball.png'
import './Events.css'
function Events(props) {
let events = [],
homeGoalEvent = [],
awayGoalEvent = [],
homeEvents = [],
awayEvents = [],
awayEventsSort = [],
homeEventsSort = []
let ballImage = document.createElement('img') //create image
ballImage.src = ball
props.props.location.state.id.goalscorer.map(i => {
events.push(i);
})
for (let i = 0; i < events.length; i++) {
if (events[i].home_scorer || events[i].away_scorer) {
if (events[i].home_scorer.length > 0) {
homeGoalEvent.push(events[i]);
} else if (events[i].away_scorer.length > 0) {
awayGoalEvent.push(events[i])
}
} else if (events[i].home_fault || events[i].away_fault) {
if (events[i].home_fault.length > 0) {
homeCardEvent.push(events[i])
} else if (events[i].away_fault.length > 0) {
awayCardEvent.push(events[i])
}
}
}
homeGoalEvent.map(i => {
homeEvents.push(`${ballImage} ${i.home_scorer} - '${i.time}`) //Enter image here
})
const customSort = (a, b) => Number(a.match(/(\d+)/g)[0]) - Number((b.match(/(\d+)/g)[0]))
homeEventsSort.push(homeEvents.sort(customSort))
return (
<div className="events-list">
<table className="home-table">
<tr><th>{props.props.location.state.id.match_hometeam_name}</th></tr>
{homeEventsSort[0].map(i => {
return <tr><td>{i}</td></tr>
})
}
</table>
</div>
)
}
export default Events