Passing object to child component loses its properties and methods

I have App.js that has a component in it where I pass down props:

let chess = new Chess();

// lots of code...
console.log("chess in App.js", chess);

return <ChildComponent chess={chess} />;

The ChildComponent.js receives this prop as follows:

const ChildComponent = (chess) => {
  console.log("chess", chess);
};

When I inspect that in Chrome, I get this:

Console image

So, I am somehow losing the object detail when I pass it down as props. Is there something obvious that I am doing wrong?

Answer

It needs to be in a {} because it’s inside a props object

const ChildComponent = ({ chess }) => {
  console.log("chess", chess);
};

OR

const ChildComponent = (props) => {
  console.log("chess", props.chess);
};