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

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!

A div element doesn't have a value attribute, and so nothing can be passed through on the back of an event object for that particular click event.

Depending on what you expect to happen, you could tackle it by doing something like:

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

I was getting similar issue, my input field was returning undefined for e.target.value

I solved it by

onChange={this.mymethod.bind(this)}

I hope it will help others.