We know that State is like a variable that can be of data type numbers to array/objects. If the variable is dynamic(changes), we use State. Since the state is a variable, how it is scoped or to whom does it have access? React components are functions that return react elements and we declare the state in the function(components). Therefore State is locally scoped/available only to the function they were declared.
States are available only to the component they were declared
Communication of Data?
We know that React app is made up of many components put together. Undeniably there will be scenarios that demand communication between components. This communication can happen only between parent to child and another way around. This communication is called Props(properties).
Props can be anything from the child - functions, state or any primitive values. The original source of data is from parents and they have full control over the data. That is why 'Props are immutable(not changeable)'.
How it connects with React.createElement()?
We know createElement() returns an object with type, key, ref, props, _owner, _store. This props key is an object. This object can contain keys like user-defined or library defined or className etc.
I am including library-defined like redux/MUI/RHF(i.e npm libraries) because libraries are still react components and they communicate with our element through props.
How do Props enhance reusability?
The child component receives props as arguments in the function(Child component). We can call this function as many times you want and hence arguments can be changed for every call. This essentially means I can use the same component with different props depending on the use case in the web application. One such example would be Facebook's 'Hello {user name}'.Here UI of that component is the same but the user name differs and hence props(use name) changes.