What is the definition of parent component

React is a tool to detect changes and perform manipulations in the DOM, which in turn is basically a tree. React components and JSX are syntatic sugar to call DOM's APIs.

eg

ReactDOM.render(
  React.createElement('div', null, 'Hello World'),
  document.getElementById('root')
);

Is just as valid as passing a Component as the first argument.

• A component represents an actual element of the DOM
• A DOM's element can be understood as a node in a tree

So a parent component/node can be defined as:

the node which is a predecessor of any node is called as PARENT NODE. In simple words, the node which has a branch from it to any other node is called a parent node. Parent node can also be defined as "The node which has child / children".

Is A parent of C

No. A is a parent node by definition but not C's parent. For all purposes A is grandparent of C cause it is it's predecessor but not it's PARENT (directly predecessor).

A is parent of B which is parent of C.

If you would access C in the DOM the following is a valid statement:

A.parentNode.parentNode

Is B a parent of C

Yes!

B gets the element of C via children prop. If C is the child of B, then B supposed to be the parent of C. But that should actually be a containment as mentioned in here.

That's exactly it. Everything passed inside a components instantiation is mapped to a special prop name children. A containment is just a fancy way of saying that a component can receive arbitrary children from it's parents and still be able to access it.

const Parent = () => <Child> Arbitrary value or node </Child>;

const Child = ({ children }) => <p> {children} </p>;

children represents everything that was passed inside the component's tag.

At least within the react docs, there is no exclusive definition of the terms parent/child component, but one can derive a definition from the usage of those terms in the docs, which might be opinionated.

So my definition would be: In the hierarchy tree, every component that is above the component in question, has an ancestor relation to that component, and thus is a parent component. Everything below can serve as a direct or indirect child.

Furthermore, direct parent components may pass information through props to its direct children and through context to its direct and indirect children. Children components may receive information from parent components accordingly.

Therefore:

Is A the parent of C?

yes (I would say a direct parent, but this can be disputed. Since A can pass props to C, but in the hierarchy tree, C would sit below B. A > B > C)

Is B the parent of C?

yes, direct parent. Tough it is a containment, still, B may provide direct props to C by a function call within B children(<propsForCFromB>)

"Containment" is just a concept in React where parents receive their children dynamically at runtime (as opposed to being pre-defined). In other words, containment is a special case of a parent-child relationship.

The first sentence of the section on containment you linked says, "Some components don’t know their children ahead of time" and then shows an example of a component named FancyBorder receiving arbitrary children via {props.children}. The existence of children implies that something is its parent, which in this case is FancyBorder.

I'm not sure if there are ironclad definitions of "parent" in React. "Parent" is a generic computer science term used to refer to something immediately above another in a hierarchy. For example, "C:\Program Files\Microsoft Office" is the parent directory of "C:\Program Files\Microsoft Office\Word".