What should I do some I can extend component in react?

Question

I have attached my code. For some reason, I keep getting an "Extends Component error".

Can I please get some assistance?

import React, { Component } from 'react';
import './App.css';

function App extends Component {

  constructor() {
    super()
    this.state = {
      player_turn: "X",
      board: ["", "", "", "", "", "", "", "", ""]
    }
  }

  squareClicked(index) {
    let player_turn = this.state.player_turn
    let board = this.state.board

    board[index] = player_turn;

    let winning_combos = [
      [0, 1, 2]
      [3, 4, 5]
      [6, 7, 8]
      [0, 3, 6]
      [1, 4, 7]
      [2, 5, 8]
      [0, 4, 8]
      [2, 4, 6]
    ]

    for (let i = 0; i < winning_combos.length; i++) {
      let winning_row = winning_combos[i]
      let p1 = winning_row[0]
      let p2 = winning_row[1]
      let p3 = winning_row[2]
      if (board[p1] == board[p2] && board[p2] == board[p3] && board[p3] == board[p1]) {
        alert(`Winner! Player ${player_turn} has won the game`)
      }
    }

    player_turn = (player_turn == "X") ? "O" : "X";
    this.setState({
      player_turn: player_turn
      board: board
    })
  }

  render()
  return (
    <div className="App">
      <h1>Tic Tac Toe</h1>
      <div className="board">
        {this.state.board.map((square, index) => {
          return (<div onClick={() => this.squareClicked(index)} className="square"><h3 className="symbol">{square}</h3></div>)
        })}
      </div>
    </div>
  );
}

export default App;

I keep getting the error Unexpected token, expected "(" (4:13) but honestly have no clue what it means. Should I be importing the component and if yes, how do I do that?

Answer 1

You are mixing function components with class components, either use:

class App extends React.Component {
  render() {
    return (
      ...
    );
  }
}

or

function App () {
  return (
    ...
  )
}

Answer 2

It should be class instead of function

import React, { Component } from 'react';
import './App.css';


class App extends Component { /* your code */ }

Also, if you're starting with react, I would recommend using functional components instead of class components. It is worth researching for pros and cons on both