How is destructuring happening in this particular example? - reactjs

Question

I am new to react and I am trying to build a folder tree component in react.
I am following this tutorial - link
you can view the code here - sandbox
I am confused about how destructing is happening in this case
const Tree = ({ data, children }) => {
const isImparative = data && !children;
return (
<StyledTree>
{isImparative ? <TreeRecursive data={data} /> : children}
</StyledTree>
);
};
Tree.File = File;
Tree.Folder = Folder;
const structure = [
{
type: "folder",
name: "src",
childrens: [
{
type: "folder",
name: "Components",
childrens: [
{ type: "file", name: "Modal.js" },
{ type: "file", name: "Modal.css" }
]
},
{ type: "file", name: "index.js" },
{ type: "file", name: "index.html" }
]
},
{ type: "file", name: "package.json" }
];
export default function App() {
return (
<div className="App">
<Tree data={structure} />
</div>
);
I am confused in this particular line
const Tree = ({ data, children }) => {
How is the destructing happening her?
You are destructing { data, children } from structure array.
How does it automatically decide what to pick inside structure for data and what to pick for children?
There are no field named data and children as well. So how is this working here?

Answer 1

When you define a component (here its Tree) it might expect props. Inside the props there is all the different properties which we are passing for example for the below the data is a prop.
<Tree data={structure} />
So, The destructuring is done for the prop. if you remove the object for the const Tree = ({ data, children }) and write prop instead of it and check you will see the different props passed to the component.
If it was like below, there would be another component called children which would contain the <div>My child</div>. This is useful for making reusable components.
<Tree data={structure}><div>My child</div><Tree/>