Higher-Order Component: Convention: Pass Unrelated Props Through to the Wrapped Component

Convention: Pass Unrelated Props Through to the Wrapped Component

render() {
  // Filter out extra props that are specific to this HOC and shouldn't be
  // passed through
  const { extraProp, ...passThroughProps } = this.props;

  // Inject props into the wrapped component. These are usually state values or
  // instance methods.
  const injectedProp = someStateOrInstanceMethod;

  // Pass props to wrapped component
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}

HOCs should pass through props that are unrelated to its specific concern because HOCs shouldn’t drastically alter its contract and it’s expected that the component returned from a HOC has a similar interface to the wrapped component.

Related concepts

Convention: Pass Unrelated Props Through to the Wrapped Component

Higher-Order Component: Convention: Pass Unrelated Props Through to the Wrapped Component — Structure map

Clickable & Draggable!

Higher-Order Component: Convention: Pass Unrelated Props Through to the Wrapped Component — Related pages: