0

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
Steve Roe
  • 73
  • 1
  • 9

0 Answers0