Why this error is showing: “A valid React element (or null) must be returned. You may have returned undefined”

Question

I know this question has been answered but i just cannot handle what's going so wrong. I'm having a wrapper function:

const withTracker = (WrappedComponent, partnerTrackingCode, options = {}) => {
  const trackPage = (page) => {
    ReactGA.set({
      page,
      options
    });
    ReactGA.pageview(page);
  };

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(partnerTrackingCode);
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage = this.props.location.pathname;
      const nextPage = nextProps.location.pathname;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return HOC;
};

export default withTracker;

and i'm calling it here:

export default (props) => {
  const MainComponent = (
    <div>
      ...
    </div>
  );
  if (props.partnerTrackingCode) {
    return (
      withTracker(MainComponent, props.partnerTrackingCode)
    );
  }
  return (<div />);
};

When the tracking code is defined and the withTracker is called even if mainComponent is a component it shows me this error: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object I've also try to replace the WrappedComponent with an empty div:

return(<div />)

but still the same error

Answer 1

It looks like you're confusing elements and components here. You're passing around elements (the actual output you want to be rendered), whereas a HOC is a component (a function that generally takes a set of props and returns an element). You're passing an element to your HOC, so when it tries rendering it (in the HOC render function) it can't render it and you get the error.

To fix, you'd firstly need to make your MainComponent into an actual component instead of just the element you want it to return, eg:

const MainComponent = props => (
  <div>
    ...
  </div>
)

Then to use that with your wrapper you'd want to wrap and then render that:

if (props.partnerTrackingCode) {
  const MainWithTracker = withTracker(MainComponent, props.partnerTrackingCode)
  return <MainWithTracker />;
}

This is a bit weird though, as you need to create the wrapped component within your render method, which isn't how you'd normally do things. It might make more sense to change your HOC so that it returns a component that takes the partnerTrackingCode as a prop instead of an argument to your HOC. Something along the lines of:

// your HOC (omitting irrelevant bits)
const withTracker = (WrappedComponent, options = {}) => {

  ...

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(this.props.partnerTrackingCode);
      ...
    }

    ...

    render() {
      // pull out the tracking code so it doesn't get passed through to the
      // wrapped component
      const { partnerTrackingCode, ...passthrough } = this.props;
      return <WrappedComponent {...passthrough} />;
    }
  }

  return HOC;
};

// in your component
const MainComponent = props => (
  <div>
    ...
  </div>
);
const MainWithTracker = withTracker(MainComponent);

export default (props) => {
  if (props.partnerTrackingCode) {
    return (<MainWithTracker partnerTrackingCode={props.partnerTrackingCode} />);
  }
  return (<div />);
};

(I don't think this is the best way to do it, I've just tried keeping as close to your code as I could. Once you start restructuring it, with your better knowledge of exactly what you're trying to do you may find a better way to organise it.)

Answer 2

your problem in your return method , in first step you must be know when you want call HOC , you must write like this

  return withTracker(MainComponent, props.partnerTrackingCode)

instead this

  return (
  withTracker(MainComponent, props.partnerTrackingCode)
  );

remove ()

and then check again , if you still have error tell me