react value is undefined when the value is clearly not empty

Question

<div className="controls">
  <i className="fas fa-play" value='work' onClick={(e) => console.log(e.target.value)}></i>
  <audio loop autoPlay></audio>
</div>

I am stupid, why is this not working.

Answer 1

i elements have no value property, they have textContent and innerHTML, but no value. value is only for form elements. The value attribute you have on i is an invalid attribute, and isn't reflected by a property. You could use e.target.getAttribute("value"), but value would still be invalid.

With more context, we might be able to give you a more React-specific answer (you probably have an in-scope variable containing the value you could just use directly), but in the absense of more context, here's a baseline answer:

You can use a data-* attribute and access that value either with e.target.getAttribute("data-value"):

<div className="controls">
  <i className="fas fa-play" data-value='work' onClick={(e) => console.log(e.target.getAttribute("data-value"))}></i>
  <audio loop autoPlay></audio>
</div>

...or with dataset (e.target.dataset.value):

<div className="controls">
  <i className="fas fa-play" data-value='work' onClick={(e) => console.log(e.target.dataset.value)}></i>
  <audio loop autoPlay></audio>
</div>