JSX expressions must have one parent element.ts(2657) In Return statement

I’m trying to build a Tic Tac Toe app that will let me choose 3×3, 4×4 and 5×5 grid and currently i’m stuck on 3×3 grid and I’m getting ‘JSX expressions must have one parent element.ts(2657)’

const newGameState = {
    squares: Array(9).fill(null),
    xIsNext: true,
  }

  class Game3x3 extends React.Component {
    constructor(props) {
      super(props)
      this.state = newGameState
    }
  
    whoseTurn() {
      return this.state.xIsNext ? 'X' : 'O'
    }
  
    onNewGame() {
      this.setState(newGameState)
    }
  
    onMove(i) {
      let newSquares = this.state.squares.slice()
      const turn = this.whoseTurn()
      if (this.state.squares[i] || winner(this.state.squares)) return null
      newSquares[i] = turn
      this.setState({
        squares: newSquares,
        xIsNext: !this.state.xIsNext,
      })
    }

  
    render() {
      const style = {
        backgroundColor: 'beige',
        flex: 1,
        alignItems: 'center',
      }
  // this is the return statement that give me an error v
      return (
        <SafeAreaView style={style}>
          <Board squares={this.state.squares} onMove={(i) => this.onMove(i)} />
          <Status turn={this.whoseTurn()} winner={winner(this.state.squares)} onNewGame={() => this.onNewGame()} />
        </SafeAreaView>
      )



    }

I tried adding another view element but it didn’t work. I will be gratefull to hear your suggestions.

Answer

It’s a appears that I didn’t have to use that return statement.

Advertisement

Answer