React Forms


Sometimes there are common gotchas that can create puzzling problems which inevitably have common solutions.

onClick Parent Element (Not Child)

How to target "parent" instead of child during onClick. Problem: refs actual child clicked, instead of onClick wrapper. Using the currentTarget property, we can access the parent/wrapper with the onClick instead.

const submitForm = e => {
// ❌ Targets child
// ✅ Targets wrapper with onClick prop
// ✅ If above fails, log currentTarget and see if it looks like HTML
// currentTarget usually returns as type of HTMLElement
// If so, use this to grabs attributes (like href or name)
// see:

From the DOM Event documentation:

Event.currentTarget Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to which identifies the element on which the event occurred.