Objects are not valid components after successful page render

Question

I'm fetching data for a page load using Next.js. I'm loading a markdown file and parsing it into an array of child components that should be compatible react dom nodes using Marksy. Everything seems to work correctly for a brief moment where I see the correct content on the page by rendering my compiled(markdown).tree using the rough following structure:

static async getInitialProps ({query}) {
  const res = await fetch('http://localhost:4000/api/test')
  const json = await res.json()
  return { content: compile(json.data).tree }
}

render () {
  return (
    <div>
      {this.props.content}
    </div>
  )
}

My array of data has the following shape:

[{"type":"h1","key":"0","ref":null,"props":{"children":["Welcome to the Jungle"]},"_owner":null,"_store":{}}]

Within a half second, React-Redbox throws an error though that says this:

Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `_class`.

I'm using react 15.4.2

Why am I getting an error show up after a successful render to the page? Thanks!

Answer 1

All React elements require an additional $$typeof: Symbol.for('react.element') field declared on the object for security reasons.

Adding this property should fix the problem

Source: https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html