How to use classNames library in a function in react?

Question

I know that you can use classnames in classes but I let's say I want to use it in a function because I am using hooks so I don't have classes. This is my code:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { classNames } from "classnames";
import './index.css';
var [a1, b1, c1] = [];
var finished = false;

function Square(props) {
  var classes = classNames({"square":!finished,"squares":props.valid&&finished,"squarez":finished&&!props.valid})
  return (
    <button className={classes} onClick={() => props.onClick()}>
      {props.value}
    </button>
  );
}

function Board() {

  const [arr, setArr] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);
  function handleClick(i) {
    if (!arr[i] && !winner) {
      const squares = arr.slice();
      squares[i] = xIsNext ? 'X' : 'O';
      setArr(squares);
      setXIsNext(!xIsNext);
    }
  }

  function renderSquare(i) {
    return <Square value={arr[i]} onClick={() => handleClick(i)} valid={a1 === i || b1 === i || c1 === i ? true : false} />;
  }
  const winner = calculateWinner(arr);
  const status = winner ? 'Winner is: ' + winner : 'Next player: ' + (xIsNext ? 'X' : 'O');
  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );

}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div><button onClick={Board}>alaa </button></div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}
function calculateWinner(squares) {
  const lines = [
    [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 < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      [a1, b1, c1] = lines[i];
      finished = true;
      return squares[a];
    }
  }
  return null;
}
// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

It gives an error which is: TypeError: Object(...) is not a function. What is the workaround for this? FYI, I have added all the codes I have for this project. Keep in mind that I took this from Reacts own official website from the tutorial section however I played around with it a little bit.

Answer 1

You're importing the classNames wrongly. It should be like this

import classNames from "classnames";

Is this what you want to achieve?

function classes(finished, props){
  return classNames({
    "square":!finished,
    "squares":props.valid && finished,
    "squarez":finished && !props.valid
  })
}

function Square(props) {
  let finished = true;
  return (
    <button className={classes(finished,props)} onClick={() => props.onClick()}>
    {props.value}
    </button>
  );
}

Live CodeSandBox