Partial Object Destructuring of React Props With ... Rest Parameters Syntax https://medium.com/p/4e8629a02035

Partial Object Destructuring of React Props With ... Rest Parameters Syntax.jsx

function ChildComponent(props) {
  // There could be other props that we didn't destructure here.
  const { firstName, lastName } = props
  return (
    <span>
      {firstName} {lastName}
    </span>
  )
}

function ParentComponent(props) {
  // <ParentComponent> partially destructures the props.
  const { firstName } = props
  // We pass the remaining props (lastName) via ... spread.
  return <ChildComponent firstName={firstName} {...props} />
}

export default function GrandParentComponent(props) {
  // In this component, we don't use the input `props` at all.
  return <ParentComponent firstName="Johnny" lastName="Walker" />
}
// The rendered result will be <span>Johnny Walker</span>.