Bec d'état - Rebecca Scott

Blog | Links | Archive
About | Resume | Advisor profile | Projects | Contact

~/Copying React props to a child component

02 Mar 2018

I just figured out something cool and thought I might blog it bacause it’s been a while. I had a little React component that wrapped creating a menu link, adding some basic logic to apply a current class to the anchor if the href passed in matched the current path. I wanted to also pass arbitrary props down to the link - specifically a data-method="delete" attribute to one of the menu links which hooks into some nasty magic Rails stuff to convert an anchor click into a DELETE request.

Obviously I didn’t want to add lots of explicit and optional prop values whenever I wanted to copy a prop down to the anchor. I found this (which seems to be an old version of the React docs) which suggests using the ES6 spread operator to transfer props.

So here’s my simple component:

const MenuItem = ({href, children, ...other}) => {
  const current = window.location.pathname === href ? 'current' : ''

  return <li><a href={href} className={current} {...other}>{children}</a></li>

I use it like this:

<MenuItem href="/profiles/me">My profile</MenuItem>
<MenuItem href="/users/sign_out" data-method="delete">Sign out</MenuItem>