Reputation: 2240
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?
Upvotes: 0
Views: 52
Reputation: 73906
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>
);
}
}
Upvotes: 2
Reputation: 16309
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>
Upvotes: 2