I was doing this tutorial from official React page. In it, as a additional credits you must add additional features. I did it all of them to the letter. Fifth feature “When someone wins, highlight the three squares that caused the win.” however it doesn’t work properly. When you win, you need one additional click on tic tac toe table to highlight winning combo. Although you can click on wherever point on table to highlight … My question is: Why is required this additional click, why it doesn’t highlight on last click just as it proclaims winner?
My codepen.
At a guess, are you checking for a winner BEFORE you add the clicked square to the array of played moves? If so, then it will only show a win on the turn AFTER the win.
From what I’m seeing, that seems a possible thing. Check for win at the END of the click handler, rather than at the beginning.
Checking for winner is working flawlessly. Problems is applying different style on winning squares.
Step 1: Inside a main component called “Game” a child component called “Board” is called.
Step 2: Board component has a prop called “highlight” with in turn holds value of an array whose members are(three of them) are values of fields of winning combination e.g. 0,1,2 or 0,3,6 etc …
Step 3: Component board renders child called “Square” and it send previously said prop as a value inside its own prop called “winningCombo”.
Step 4: Component Square then evaluates if its received this prop and if its received it, then it compares prop’s values, previously mentioned 0,3,6 etc, with it’s elements other props an id’s and if it’s same value as it’s id, then it paint it’s background in flushed green and sets it’s font color to red.
By my account, passing these props completely from top to bottom , somewhere, somehow … Maybe if i encompass whole render function in main component in if statement which will get executed if “highlight” prop got it values … PS: “highlight” state prop is undefined, hence it’s “falsy” by default if that helps you …
function Square(props) . It creates individual squares and is where is determined which style is applied to individual square element depending on it’s id prop. It’s a top one, just scroll upwards to the top.
Aha … So somewhere here
cols.push(this.renderSquare(i * 3 + j));
i should pass prop something like this:
squared = (prop) => {
....
cols.push(this.renderSquare((i * 3 + j),props.someProp));
...
}
Is this sort of concept that you’re thinking of?
I already have that in the form of state named a “highlight” which is passed down as a prop. Now it’s only left to find a way to implement suggestions.
Well, i didn’t quite used your suggestion, but i did it anyway. Care to take a gander? Here it is. Are these additional tasks that i done, done in proper React manner?
I would definitely try to make the following more DRY (Do Not Repeat Yourself). In fact, you have several sections of code which code be simplified. This is less a React thing, but more of an overall improvement you could make it the code. Less Code === Better Readable and code management.
if (winner) {
return (
<div className="game">
<div className="game-board">
{/*current.squares promenljiva je u stvari niz iz objekta iz state-a. prop-u squares iz board komponente, te u njoj square komponente, dodeljuje se prop i vrednost za prop. Salje se u Board koji ga prosledjuje Square(value). handleClick(i) takodje vodi do istih komponenti, a parametar je u stvari indeks kliknutog dugmeta.*/}
<Board
squares={current.squares}
winningCombo={winner}
onClick={i => this.handleClick(i)}
/>
</div>
<div className="game-info">
<button onClick={this.reArrange}>ReArrange</button>
<div>{column}</div>
<div>{row}</div>
<div>{status}</div>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
<ol id="myList">{movesCopy}</ol>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
</div>
</div>
);
} else {
return (
<div className="game">
<div className="game-board">
{/*current.squares promenljiva je u stvari niz iz objekta iz state-a. prop-u squares iz board komponente, te u njoj square komponente, dodeljuje se prop i vrednost za prop. Salje se u Board koji ga prosledjuje Square(value). handleClick(i) takodje vodi do istih komponenti, a parametar je u stvari indeks kliknutog dugmeta.*/}
<Board
squares={current.squares}
onClick={i => this.handleClick(i)}
/>
</div>
<div className="game-info">
<button onClick={this.reArrange}>ReArrange</button>
<div>{column}</div>
<div>{row}</div>
<div>{status}</div>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
<ol id="myList">{movesCopy}</ol>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
</div>
</div>
);
}
How about just conditionally sending winner via the winningCombo prop?
return (
<div className="game">
<div className="game-board">
{/*current.squares promenljiva je u stvari niz iz objekta iz state-a. prop-u squares iz board komponente, te u njoj square komponente, dodeljuje se prop i vrednost za prop. Salje se u Board koji ga prosledjuje Square(value). handleClick(i) takodje vodi do istih komponenti, a parametar je u stvari indeks kliknutog dugmeta.*/}
<Board
squares={current.squares}
winningCombo={winner ? winner : null}
onClick={i => this.handleClick(i)}
/>
</div>
<div className="game-info">
<button onClick={this.reArrange}>ReArrange</button>
<div>{column}</div>
<div>{row}</div>
<div>{status}</div>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
<ol id="myList">{movesCopy}</ol>
{/*Prikazivanje vrednosti prethodno definisane promenljive.*/}
</div>
</div>
);
1 Like
Thank you. Forgot i can do that
Still thinking in regular js.
Ha … didn’t thought about null as “falsy” vs “truthy”, just as a one more value to evaluate … Good catch.