Translate returning invalid value

After updating to the latest version and switching to <Translate> from localize(), the following error logs to the console and the app doesn’t render at all: Invariant Violation: Translate.render(): A valid React element (or null) must be returned. It happens when using <Translate> with the id property, but if I supply it a render prop function, everything works well. The code is pretty simple:

const Introduction = () => {
  return (
    <section className={style.Introduction}>
      <article className={style.About}>
        <Translate id="introduction" />
      </article>
    </section>
  );
};

export default Introduction;

[tariellaelius]

Great! I’m glad I was able to help.

[ryandrewjohnson]

I have confirmed that the issue is due to React 15 not supporting fragments and strings.

This was never an issue with the original translate function because that was always used in an expression, and it was ok to use text fragments not wrapped in elements. Where as the new Translate component will require wrapping text elements to render in react v15.

I’m most likely going to update the package.json peerDependency for react to 16.x.x, and then update the docs to include the workarounds if they want to use <Translate /> in older versions of React.