Expected "}" OR Adjacent JSX elements must be wrapped in an enclosing tag

Question

I'm totally new to react and am trying to follow this tutorial. Unfortunately, there is an error in it. Because I have no idea how to use react, I don't know how to fix it.

I'm trying to follow this tutorial --> https://medium.com/@williamyang93/my-journey-with-react-native-game-engine-part-i-starting-the-project-bbebcd2ccf6

I think there is a mistake with this part of the code:

export default class App extends React.Component {
render() {
   return (
    <GameEngine
    style={styles.container}
    entities={{ initialBox: { 
               body: initialBox, 
               size: [boxSize, boxSize], 
               color: 'red', 
               renderer: Box
         }}>
    <StatusBar hidden={true} />
    </GameEngine>
        );
  }

}

When I try and run my app.js with that I get this error: Adjacent JSX elements must be wrapped in an enclosing tag.

My first thought was to remove the extra { on the 6th line, so this:

export default class App extends React.Component {
    render() {
       return (
        <GameEngine
        style={styles.container}
        entities={ initialBox: { 
                   body: initialBox, 
                   size: [boxSize, boxSize], 
                   color: 'red', 
                   renderer: Box
             }}>
        <StatusBar hidden={true} />
        </GameEngine>
            );
      }
}

But then I get: Expected "}"

Can someone help me fix this error is so I can continue with the tutorial?

Answer 1

You are missing the closing curly brace of your inner object:

<GameEngine
    style={styles.container}
    entities={{ 
        initialBox: { 
            body: initialBox, 
            size: [boxSize, boxSize], 
            color: 'red', 
            renderer: Box,
        } // this is missing
    }}
>
    <StatusBar hidden={true} />
</GameEngine>

Answer 2

Its a good idea to keep your render function return as simple as possible like:

export default class App extends React.Component {
render() {

   let box = {
      initialBox: {
          body: initialBox, 
          size: [boxSize, boxSize], 
          color: 'red', 
          renderer: Box
      }  // <-- this was missing in your code
   }

   return (
      <GameEngine style={styles.container} entities={box}>
         <StatusBar hidden={true} />
      </GameEngine>
   );
  }
}