Pass a react value into a JS Alert - reactjs

Question

Im attempting to learn a little bit of react and struggling with this simple concept. I know its just a syntax thing that I'm unfamiliar with but I just can't get it down.
Im attempting to create a tic tac toe game, where each square has a value. When the square is clicked, it should pop up an alert box that shows "You've clicked box {Box Number}". I cannot figure out how to pass the value to the alert function.
class Square extends React.Component {
render() {
return (
<button className="square" onClick={function() {alert("Youve clicked box " + this.props.value);}}>
{this.props.value}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</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 {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);

Answer 1

Looking at your code and based on your comment, the issue is that you're trying to access the props attribute of an object (this) that doesn't have the props attribute.
One way you can do this is to use an arrow function.
<button onClick={() => { alert(`Something ${this.props.value}`); }>Click Me</button>
Another way is to bind the function.
class Box extends React.Component {
constructor(props) {
super(props)
this.onClick = this.onClick.bind(this)
}
onClick() {
alert()
}
render() {
return (
<button onClick={this.onClick}>Click Me</button>
)
}
}
Alternatively, you can directly use an arrow function inside your class so you don't have to bind if you don't want to define one in the render function.
class Box extends React.Component {
onClick = () => {
alert()
}
render() {
return (
<button onClick={this.onClick}>Click Me</button>
)
}
}
Demo: https://jsfiddle.net/1wfyq68r/

Answer 2

You're re-binding the context of this by using a function declaration in your onClick. When you refer to this inside of that function, you're now referring to the context of that function, not the Square class (where this.props would reside).
Any easy fix is to use an arrow function instead–it does not rebind the context of this.
<button
className="square"
onClick={() => alert("Youve clicked box " + this.props.value)}
>
{this.props.value}
</button>

Answer 3

You need to set the context of the click handler function so it references the correct this. This can be done by either
Using an arrow function
() => alert("Youve clicked box " + this.props.value)
Explicitly binding
function() {
alert("Youve clicked box " + this.props.value);
}.bind(this)
A useful resource as to why this is required here