Having an issue with e.target.value returning Undefined in React
<p>I have a feature where you can click an img and see a a list of names which are clickable....when you click a name, that persons image should take the place of the original img. Im working with an artist api and rather then me getting an error in the console, the image changes to an img of an artist whos name is 'undefined'...strange. might not be a huge fix but ive been tormented by this issue for some time now. </p>

<pre><code>searchForArtist(query) {
    request.get(`https://api.spotify.com/v1/search?q=${query}&amp;type=artist`)
      .then((response) =&gt; {
        const artist = response.body.artists.items[0];
        const name = artist.name;
        const id = artist.id;
        const img_url = artist.images[0].url;
        this.setState({
          selectedArtist: {
            name,
            id,
            img_url,
          },
        });
      })
      .then(() =&gt; {
        this.getArtistAlbums();
      })
      .catch((err) =&gt; {
        console.error(err);
      });
  }

  getSubsequentCollabs(artist) {
    this.setState({
      selectedArtist: {},
      selectedAlbums: {},
      artistCounts: {},
    });
    console.log(artist);
    this.searchForArtist(artist);
  }

  artistOnClick(e) {
    console.log(e);
    let artist = e.target.value;
    this.getSubsequentCollabs(artist);
  }
</code></pre>

<p>I have another component doing this:</p>

<pre><code>const Artist = ({name, artistOnClick}) =&gt; {
  return (
    &lt;div name={name} onClick={artistOnClick}&gt;
      {name}
    &lt;/div&gt;
  )
}

export default Artist;
</code></pre>