React JS print the choice of the user - reactjs

Question

I'm trying React.js and I followed a tutorial to make a morpion game. Now, I'm trying to get the choice of the user, where he clicked, and print the column and line. Here's what I've done so far:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props) {
return (
<button
className="square"
onClick={props.onClick}
>
{props.value}
</button>
);
}
class Board extends React.Component {
renderSquare(i) {
return <Square
value={this.props.squares[i]}
onClick={ () => this.props.onClick(i)}
/>;
}
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(9).fill(null),
choice: null,
}],
stepNumber: 0,
xIsNext: true,
};
}
jumpTo(step){
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0,
});
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
//Si quelqu'un a gagné, on empêche le clic
if (calculateWinner(squares) || squares[i]){
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: history.concat([{
squares: squares,
}]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext,
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
const choice = (current) => { this.calculateChoice(current.squares) };
const moves = history.map((step, move) => {
const desc = move ?
'Revenir au tour n°' + move :
'Revenir au début de la partie';
return (
<li key={move}>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status;
if (winner){
status = winner + ' a gagné';
} else {
status = 'Prochain joueur : ' + (this.state.xIsNext ? 'X' : 'O');
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={ (i) => {
this.handleClick(i);
} }
/>
</div>
<div className="game-info">
<div>Coup {choice}</div>
<div>{ status }</div>
<ol>{ moves }</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]){
return squares[a];
}
}
return null;
}
function calculateChoice(squares){
const lines = [
[0,0],[0,1],[0,2],
[1,0],[1,1],[1,2],
[2,0],[2,1],[2,2],
];
for (let i = 0; i < lines.length; i++){
const [a, b] = lines[i];
return "test ".squares[a];
}
return "test";
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
I defined a const choice, where I want to put the choice of the user. Then I call calculateChoice, but nothing is displayed when I try { choice }. I don't know why. Also, I don't know how to get the line and column of where the user clicked. I made a tab of the different choices but then I don't know how to compare them to the Square the user clicked.
Thanks
Edit:
So I changed the const choice:
const choice = calculateChoice(current.squares);
Now it works, I get a display. But I don't know how to get the column and line of where the user clicked. I started with the calculateChoice but I don't know where I'm going with this.
What I would like is:
The user click on a Square. The 'X' or 'O' is affected to the Square and then it displays "choice" which corresponds to (line,column) of where the user clicked. Thanks for any explanation to how to develop that!

Answer 1

This is a function, const choice = (current) => { this.calculateChoice(current.squares) };
If you render <div>Coup {choice}</div>, of course it won't render any value, because it's a function.
This function won't return proper value because it's not meant to return anything. You can either do const choice = (current) => { return this.calculateChoice(current.squares) }; or const choice = (current) => this.calculateChoice(current.squares);
If you want to call this.calculateChoice(current.squares), make sure it's inside the class component.