What is meant by parent component and child component in the sense of react and react native?

2
votes

I am new to React & React Native, and doing my best to learn it well. During the learning i came to the lesson props and state but here one thing makes me confused and that is parent component and child component.

When we create a component in the React or React Native it is created like that:

export default class myApp extends React.Component{
    render(){
        return(
            // Do something ...
        );
    }
}

And that's it. So, why people say parent component and child component and so on. Is the React.Component is the parent component or is the myApp is child component. How parent and child components communicate via the props and state. Can please someone explain in easy words along with few examples, i will be glad.

Thanks !!!

4
javascriptreactjsreact-native
In a component based architecture, you will have a HOC which will call your custom component and that will internally call some generic component. So with respect to your custom component, HOC is a parent component which will supply props. Your component will maintain its state, and based on provided props and computed state, you will pass props to this generic component, which is a child component. – Rajesh
Well React applications are build with a set of react components, which can be encapsulated in each other. So a component B inside component A is the child component of the parent component A. Anyone correct me please if i'm wrong, not using React myself. – Olivier Krull

4 Answers

2
votes

In React.js and React Native, you render UI with components. So let say you want to build a House component. But first, you build a set of different components that you are going to use as building blocks such as a Door, Wall and Window components. Then you are going to use these components in your House's render function to render it. These building blocks components in this example are child components and the House component is their parent component.

On a side note, this concept originally comes from the DOM although there you talk about nodes (parent node, etc) rather than components.

1
votes

React.Component is a parent for myApp component class.

While 'parent' and 'child' alone refer to React component hierarchy. myApp component is a parent for Foo component, and Foo component is a child of myApp component:

export default class myApp extends React.Component{
    state = { foo: true };

    render(){
        return(
            <Foo foo={this.state.foo} />
        );
    }
}

Parent and child component can communicate through props in one direction. A parent can pass something (e.g. its own state) to a child through props.

1
votes

As commented,

In a component based architecture, you will have a HOC which will call your custom component and that will internally call some generic component. So with respect to your custom component, HOC is a parent component which will supply props. Your component will maintain its state, and based on provided props and computed state, you will pass props to this generic component, which is a child component.

TL;DR

Example:

Requirement:

You are trying to create a form that will accept 2 numbers and display their total.

What you need:

  • A form component that will create 2 input fields.
  • A input component that will accept value and return it to the caller.
  • A validator that will check if the value entered is a number or not.
  • A label to display total.
  • An event to process inputs.

Implementation:

You start in a ground-up fashion with input components. You cannot use <input type='text' as it will not have your custom validator. You cannot use <input type='number' as it adds spinner. So you create a custom component which uses type="text" and write your own validator

Now for this component, its value cannot be the value entered by user as it can be NaN. So you need a variable to store the processed value. You also need this value to be created once and not every time to persist its value. This place is called state.

Now that you have an input component, you need to stitch it together. So you create a form with your custom components and uses handlers/functions for communication. These functions passed to components are called as props.

So, to summarize, state is something you as a component will hold and prop is what you get from external environment (say some component).

Now, in this component tree, who do you call parent/child component? It is always referred based on a context. So in above example, w.r.t CustomInput component, since FormComponent is calling it, that is its parent. Similarly, any component it is calling will be its child component.

0
votes

The parent/child component is an intuition not only the react/react native but to all mark up in general.

I assume you are conversant with html tag.

<div class='parent'>
    <div class='child'></div
</div>

From the script above div.parent is a parent tag to div.child and vice versa.

Similarly in react

export default class myApp extends React.Component{ 
    state = { foo: true }; 
    render(){ 
        return( 
            <Foo foo={this.state.foo} /> 
        );
    }
}

Foo is a child to myApp and myApp is parent to Foo.

This intuition is same in any mark up language