Having an issue with e.target.value returning Undefined in React

Question

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.

searchForArtist(query) {
    request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`)
      .then((response) => {
        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(() => {
        this.getArtistAlbums();
      })
      .catch((err) => {
        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);
  }

I have another component doing this:

const Artist = ({name, artistOnClick}) => {
  return (
    <div name={name} onClick={artistOnClick}>
      {name}
    </div>
  )
}

export default Artist;

Answer 1

event.target will give you the target HTML element. Javascript will make all the attributes of the Node as a property of event.target.

For Example:

<div id="hello">Hello</div>

e.target.id //returns 'hello'

There are special cases like inputs where the property value in implicit. But, for other HTML element you need to specify the attributes explicitly.

So, you HTML should be like this

const Artist = ({name, artistOnClick}) => {
  return (
    <div value={name} onClick={artistOnClick}>
      {name}
    </div>
  )
}

e.target.value //return the name

OR

const Artist = ({name, artistOnClick}) => {
  return (
    <div onClick={() => artistOnClick(name)}>
      {name}
    </div>
  )
}

e.target.name //returns the name 

Hope this helps!

Answer 2

In React e.target.value will appear null if it's not saved in another variable. in example:

const onChange = e => {
    console.log(e.target.value);
    setState(
        blah: e.target.value
    )
}

In the above example console.log(e.target.value) would appear as the value but then in setState e.target.value would be undefined.

You would need to save e.target.value in a new variable, to be able to use it.:

const eTarget = e.target.value;

React uses event pooling. Read about it here:

From the docs:

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.