React Accepting Value Prop ConsoleLog shows Different than Print on page

Question

I am experiencing a very weird situation where I am accepting a prop within Square that comes from Board. I initialize it as value and am trying to give alert when user clicks on any number. This should be ideally very very simple though, while value shows on the board as 1, if I click on it, I get what you see object in the picture within function.

I am following React official tutorial https://reactjs.org/tutorial/tutorial.html#completing-the-game

Answer 1

onclick event handler has its own scope variable value . Which is an onclick event object. That is why you can't access value object is defined at render method level.

update event handler

onClick={function(e) { console.log(value); }}

Answer 2

It's all because the way you implemented the onclick function there.It just lost the scope of the event. Please try with the code below.Replace the onClick function with this one.Hope it will work. onClick={()=>{console.log(data)}}