Are props simply a tool to pass down data from one file to another?
I’m trying to really paint a picture of what they are and this seems to be the best explanation I can come up with. You have a component, and you can pass in a prop of what seems to be just about anything even including functions from what I’ve seen. And then you can use that data in the component file itself.
Is that basically all props are? They are a bit confusing but thinking about it like this made them less confusing. However, is this accurate?
Well, passing data to components. A component doesn’t have to be inside another file and you are not passing the data to the file but to the component (the component can be exported/imported).
But yes, you can just think of props as function parameters and arguments.
You can also check out the docs on JSX and createElement to better understand how props are implemented.
Don’t think about other files. As lasjorg says, it would be the same if they are in the same file. In reality, the bundler is just going to “combine everything together” as it bundles it all up, so the files are really just a convenience for the developer.
The function analogy works pretty well, it’s just that React wraps the “parameters” all up in a props object.
I just think of it as how the parent passes info down to the child.
There are various categories of data in a component (thinking about functional components, FCs):
props - data passed from the parent (or possibly a HOC, less common in modern React)
local variables - data that gets reinitialized on each render
state - data that is preserved from render to render (might be wrapped in a hook in FCs)
imported variables - might be static information or could store data (like a singleton module)