What is the definition of "parent component" in React?

Question

What is the definition for "parent component" in React?

eg.

const A = () => {
  return (
    <B>
      <C/>
    </B>
  );
}

Is A the parent of C?
Is B the parent of C?

Follow up:
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.

Answer 1

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.

Answer 2

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>)

Answer 3

"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".

Answer 4

A component that accepts 'children'

So in a Higher-order Component, that manages rendering components based on the auth state of a user, the children of the parent component would be the component that is returned by the HoC

const Protected = () => {
  const isAuthorised = useAuth();
  return isAuthorised ? <Outlet /> : <Login />;
};

This is code from how react-router-dom manages rendering components based on auth state. <Outlet /> just means that it's the initial component that you're trying to render

So you can see that the <Outlet /> and <Login /> components would be children of the Protected component

In your question, I'd consider A to be a Higher-order Component and then B the actual parent of C

Answer 5

There is no official definition from the React documentation. The term is often used in an informal manner, and sometimes to refer to any ancestor not the direct parent.

If you want to use the term in a technically accurate manner, you should distinguish between (JSX) elements and (mounted) components.

• JSX, just like XML, defines a tree structure by nesting tags. These tags can represent a fragment element, a builtin element (lowercase) or refer to a class/function component to render (uppercase)

  The parent of an element is the element of which it is a direct syntactic child.

  In your example <B><C /><B>, <B> is the parent element of <C>. <B> is the root node in this tree (that is rendered by A), it does not have a parent element. We have not seen where <A> is used or what parent element it might have. <C /> does not have any child elements.

• React keeps the state of components in a tree structure, whether that are native DOM elements, the instances of class components, the hook states of function components, or other things (context providers and consumers, portals, etc). You can inspect this structure, often dubbed "virtual DOM", in the React devtools.

  The parent of a component is the component in which it is rendered.

  In your example A = () => (<B>< C/></B>), A is the parent component of B. We have not seen what B does with the <C /> JSX element, so we don't know the parent component of C - it depends on the implementation. If B = ({children}) => (<>{children}</>), the parent component of C would indeed be B itself, but in B = ({children}) => (<div>{children}</div>) it would be the div "component". And B might not render the children prop at all, or it might render it multiple times, or it might modify what gets rendered.

Answer 6

simply: A is the parent of B and C in components aspect. B is the parent of C in DOM aspect.