How to add className dynamically from a class as a parent and function as a child in ReactJS?
I want to add different className to all the winning boxes in my tic tac toe game. I am a newbie to React and so can't figure out how to do it.
Here's codepen link to my code:
https://codepen.io/khushikothari/pen/vYgmoNa
Also here is the js code:
function Square(props) {
const className = "square" + (props.highlight ? "highlight" : "");
return (
{props.value}
);
}
class Board extends React.Component {
renderSquare(i) {
return (
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
highlight = {false}
/>
);
}
render() {
return (
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
);
}
}
class Game extends React.Component {
constructor(props){
super(props);
this.state = {
history: [{
squares: Array(9).fill(null)
}],
stepNumber: 0,
xIsNext: true
};
}
handleClick(i) {
const history = this.state.history;
const current = history[history.length -1];
const squares_cpy = current.squares.slice();
let arr = calculateWinner(squares_cpy);
if (arr[1] || squares_cpy[i]) {
return;
}
squares_cpy[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: history.concat([{
squares: squares_cpy
}]),
stepNumber : history.length,
xIsNext: !this.state.xIsNext,
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
let arr = calculateWinner(current.squares);
const moves = history.map((step, move) => {
const desc = move ? 'Go to move #' + move : 'Go to game start';
return(
<li key={move}>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status;
if (arr[1]) {
status = 'Winner: ' + arr[1];
}
else {
status = 'Next player: ' + (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>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
,
document.getElementById('root')
);
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 [lines[i], squares[a]];
}
}
return [null, null];
}
Top comments (0)