Hello everyone! Have you ever encountered the situation “JSX expressions must have one parent element.ts(2657) In Return statement” while running the project? As you know JSX makes it easier to see errors during deployment and these errors will be displayed during compile. Unlike HTML code because div can cause the interface to display wrong. JSX is usually the opposite because you can forget to close a div for example it can immediately show an error. So is there any way to solve the above situation? Follow us on this post.

When does it occur?

Below is the user program that ran and got the error ‘JSX expressions must have one parent element.ts(2657)’. The situation occurs when the user is trying to install a 3×3 grid on the Tic Tac Toe application.

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



    }

Answer for “JSX expressions must have one parent element.ts(2657) In Return statement”

For the program you’re building, in the above situation I don’t think it’s a good idea to use the return statement.

Conclusion

Our above article has given you a way to handle the situation “JSX expressions must have one parent element.ts(2657) In Return statement”. Hope you will soon solve the problem of your project. In addition, our site offers many other interesting topics in programming. If you have any difficulties or questions, please leave a comment, we will respond immediately. Thank you for reading!