预期的“}”或相邻的 JSX 元素必须包含在封闭标记中

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>
   );
  }
}