How React can import objects from different components without import statement?

I am currently learning React.js.

When you want to use a components in a different .js file, you need to import the component to the file you are working on. However, when I make a simple website, I didn’t need to import an object inside of App.js into the file I am working on. I don’t know why we don’t have to explicitly specify that. If we don’t import then, how React knows that what I am referring to?
Here’s the screenshot of outcome and each components. The red dot line represent what I am talking about…
Visual outcome
Object in App.js
As the comment in the picture below says, I don’t know how this file fetch the object in App.js…
Calendar component (ExpenseDate.js)
By the way, Expenses element another thing, but I added screenshot below just in case.
ExpenseDate.js nested with Card.js component

Thanks for reading this! 🥰

Answer

you’re passing the expenses object through react component props and react will handle passing the data to your Expenses component.

If I want to clear this concept more, just imagine every react component as normal function in javascript. when you import a function in another file and you pass some data as function argument to the function you don’t need to import that data again into the file that your function has been declared, you just use the argument of the function. (which here is the component props)

if you want to learn more about the props concepts in react, I suggest reading this page from react documents: https://reactjs.org/docs/components-and-props.html