How do I check if my event.target is typeof HTML input element in React?

Question

Please see this minimum example https://codepen.io/rockmandash/pen/Rzwowd

The code is this:

<div class="cool">
  <input type="checkbox" value="checkbox1">
  <input type="checkbox" value="checkbox2">
  <input type="checkbox" value="checkbox3">
</div>

document.querySelector(".cool").addEventListener("click", event => {
  // In React World
  // How do I check if event.target is typeof HTML.input Element?
  console.log(event.target.value);
});

I'm asking this question because I have thousands of input elements, in react, I will have to create thousands callback function.

So I move my function up to their parent, but then I have to validate if I am current clicking an input element.

Otherwise, I could potentially set the wrong event.target.value.

Answer 1

if (event.target instanceof HTMLInputElement)