Objects are not valid as a React child (found: object with keys {en, nl}). If you meant to render a collection of children, use an array instead

Question

I am setting up a React app. I am getting the error "Objects are not valid as a React child (found: object with keys {en, nl}). If you meant to render a collection of children, use an array instead."

19 stack frames:

throwOnInvalidObjectType node_modules/react-dom/cjs/react-dom.development.js:13231

reconcileChildFibers node_modules/react-dom/cjs/react-dom.development.js:14133

reconcileChildren node_modules/react-dom/cjs/react-dom.development.js:16990

updateHostComponent node_modules/react-dom/cjs/react-dom.development.js:17632

beginWork node_modules/react-dom/cjs/react-dom.development.js:19080

HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:3945

invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:3994

invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4056

beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:23964

performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22776

workLoopSync node_modules/react-dom/cjs/react-dom.development.js:22707

renderRootSync node_modules/react-dom/cjs/react-dom.development.js:22670

performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:22293

scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js:21881

updateContainer node_modules/react-dom/cjs/react-dom.development.js:25482

(anonymous function) node_modules/react-dom/cjs/react-dom.development.js:26021

unbatchedUpdates node_modules/react-dom/cjs/react-dom.development.js:22431

legacyRenderSubtreeIntoContainer node_modules/react-dom/cjs/react-dom.development.js:26020

render node_modules/react-dom/cjs/react-dom.development.js:26103

Here you can find the index.tsx file.

import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import MainApp from './router'

const page = (
  <BrowserRouter>
    <MainApp />
  </BrowserRouter>
)

const app = document.getElementById('root');
ReactDOM.render(page, app)

Here you can find the router.tsx file

import * as React from 'react'
import { ThemeProvider } from '@material-ui/styles';
import AppWrapper from './App'
import { SnackbarProvider } from 'notistack';
import { theme } from './jss/theme';
import { CssBaseline } from '@material-ui/core';

const Router = (props: any) => (
    <ThemeProvider theme={theme}>
        <CssBaseline />
        <SnackbarProvider autoHideDuration={3000} maxSnack={3}>
            <AppWrapper {...props} />
        </SnackbarProvider>
    </ThemeProvider>
)

export default Router

Here you can find the App.tsx file

import React from 'react';
import { Route, Switch } from 'react-router-dom'
import CssBaseline from '@material-ui/core/CssBaseline';
import Home from './routes/Home'
import Header from './components/header/Header'

const routes = [
  {
    path: '/', component: Home, exact: true
  }, {
    path: '/home', component: Home
  }
]

function App() {
  return (
    <Switch>
      {
        routes.map(({ exact, component: Component, path }) =>
          <Route key={`parent${path}`} exact={exact} path={path} render={prop =>
            <React.Fragment>
              <CssBaseline />
              <Header />
              <main>
                <Component {...prop}></Component>
              </main>
              <CssBaseline />
            </React.Fragment>
          }
          />
        )
      }
    </Switch>
  );
}

export default App;

Answer 1

I'm not sure this is the issue, but your imports look a little strange:

import * as React from 'react'
import * as ReactDOM from 'react-dom';

Should be:

import React from 'react'

And

import ReactDOM from 'react-dom';