CODEWITHSUNDEEP
reactjs
Gavin-walsh
Gavin-walsh

Reputation: 109

How do I reference an image element in an IF statement?

I've created a music player component and I'm adding an onclick function that will update the current song when the image is clicked.

I've got everything working so far except for this onclick feature.

I can get it working with one song but I now want to add conditionals to make it work with all of the images. For some reason I can't remember how to target the image tag to reference it in my IF statement. I know this is very basic stuff but hopefully someone can remind me how to do it!

I've shortened the code to make it easier to read.

   function getSong() {

    let songFile = songs.map(song => song.songFile)
    
    // I want to know what to add inside the () to reference the images.

    if ('Reference to Rap img') {
        setSongClicked(songFile[0])

    } else if ('Reference to Rock img') {
      setSongClicked(songFile[1])

    } else if ('Reference to Trending img') {
      setSongClicked(songFile[2])

    } else if ('Reference to Jazz img') {
      setSongClicked(songFile[3])
    }
   }

  return (

    <div className="song-main-container">
        <div className="song-container">
            <img src={Rap} onClick={getSong} />
            <img src={Rock} onClick={getSong}/>
        </div>
        <div className="song-container">
            <img src={Trending} onClick={getSong} />
            <img src={Jazz} onClick={getSong}/>
        </div>
    </div>

  )
}

Upvotes: 0

Views: 19

Answers (3)

Shoaib Amin
Shoaib Amin

Reputation: 205

Use function parameter as index:

function getSong(idx) {

    let songFile = songs.map(song => song.songFile)
    // if the index in songs do not matter then you can use
    setSongClicked(songFile[idx])

    // Otherwise use the following code
    switch(idx) {
        case 0:
            setSongClicked(songFile[0]) # Rap
            break;
        case 1:
            setSongClicked(songFile[1]) # Rock
            break;
        case 2:
            setSongClicked(songFile[2]) # Trending
            break;
        case 3:
            setSongClicked(songFile[3]) # Jazz
            break;
   }
}

  return (

    <div className="song-main-container">
        <div className="song-container">
            <img src={Rap} onClick={() => getSong(0)} />
            <img src={Rock} onClick={() => getSong(1)} />
        </div>
        <div className="song-container">
            <img src={Trending} onClick={() => getSong(2)} />
            <img src={Jazz} onClick={() => getSong(3)} />
        </div>
    </div>

  )

Upvotes: 0

David
David

Reputation: 218877

Instead of trying to reference the element, just pass a value to the function. What value do you want to pass?

The code appears to be using hard-coded array index values:

setSongClicked(songFile[0])

So you can pass those values. For example:

<img src={Rap} onClick={() => getSong(0)} />

Then in the click handler function, expect that value as an argument:

function getSong(index) {

Then you don't need an if statement at all. Just update state with that value:

setSongClicked(songFile[index]);

Upvotes: 1

Konrad
Konrad

Reputation: 24661

You are looking for event.target

function getSong(event) {
  event.target
}

Upvotes: 0

Related Questions