destructuring children Prop in react - html

Question

I have two components one is board component other is square component
when I am passing the props from box to square something strange is happening
Code for Board component is
import React from "react";
import Square from "./Square";
const Board = () => {
return (
<div className="board">
<div className="board-row">
<Square value={1}>
<p>hello</p>
</Square>
<Square value={2} />
<Square value={3} />
</div>
<div className="board-row">
<Square value={4} />
<Square value={5} />
<Square value={6} />
</div>
<div className="board-row">
<Square value={7} />
<Square value={8} />
<Square value={9} />
</div>
</div>
);
};
export default Board;
Code for Square component is
import React from "react";
function Square({ value, children }) {
// the curly braces are just destructring
//the values from props passed
console.log(children);
return (
<button type="button" className="square">
{children}
</button>
);
}
export default Square;
The question is console.log(children) is printing an object on my console whereas {console} is showing normal text on button
why is this happening ??

Answer 1

The thing to remember about JSX is that it is much closer to JavaScript than HTML, despite looking more like the latter. The React Docs include a section which shows how simple tags are equivalent to React.createElement calls, which produce objects describing how to render HTML.
props.children is an object which describes createElement calls happening further up the component tree. This allows it to be passed to further utilities like React.Children or React.cloneElement before finally being passed to the renderer. What you see in the console and what you see in the browser are its states before and after it has finally been rendered.

Answer 2

I assume that you mean that console.log(children) produces something similar to this. And you're not sure why {children} in the return value would produce 'normal' text in your browser window.
The reason for this is that children in the Square component is a Javascript object created by React. Your console doesn't know how to display this any better than showing a textual representation of the properties (as you see in the image).
But when you return {children} in your component function, it is handled by React when rendered to your browser window. React does, in fact, know how to display it 'correctly', hence the button with the text as expected.