Search⌘ K
Home
Courses
Advanced React Patterns With Hooks

Handling Props with the Same Property Name

Explore how to manage props with identical property names in React by using the Prop Getters pattern. Learn to combine internal and user-defined onClick handlers to maintain component flexibility and functionality, ensuring both are invoked correctly.

We'll cover the following...

We allowed passing custom props into the getToggler props getter. Now, what if the user wanted to pass in a custom onClick prop?

Here’s what I mean:

.Expandable-panel {
    margin: 0;
    padding: 1em 1.5em;
    border: 1px solid hsl(216, 94%, 94%);;
    min-height: 150px;
  }

If the user does this, it completely overrides the onClick handler within the useExpanded custom hook and breaks the functionality of the app as you can see in the output.

The button no longer expands the element, but the user’s custom click handler is invoked whenever you click the button.

Why is this the case?

This is because we have an onClick property in the returned object, but it is overridden by the user.

Javascript (babel-node)
// useExpandable.js
...
  const getTogglerProps = useCallback(
    ({ ...customProps }) => ({
      onClick: toggle, // this is overriden 
      'aria-expanded': expanded,
      // customProps overrides the onClick above
      ...customProps
    }),
    [toggle, expanded]
  )

Overriding the User’s onClick Handler

If you move the position of the ...