React Parent to Child Component Communication

This tutorial will demonstrate basic Parent to Child component communication using Class and Function components.

There will be a Parent Class and Function component that calls a Child Class and Function components. These combinations are the most common. In the next article in this series we will look at more advanced examples for passing data from Child to Parent and Grandchild to Parent. But for now these example will be kept very simple so you can learn the basics and a good understanding for how this works.

Style sheet (Optional) – Style.css

.container {
    display: block;
    margin-left: auto;
    margin-right: auto;    
    margin-top: 150px;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px 20px;
    grid-template-areas:
      "Top"
      "Middle"
      "Bottom";
  }
  
  .Top { grid-area: Top; }
  
  .Middle { grid-area: Middle; }
  
  .Bottom { grid-area: Bottom; }

Parent Class component – ParentClass.js

When calling a component that can be called multiple time, use a key with a unique identifer such as 1, 2, 3… for each component. You will need to pass the function down to the child as a clickHandler in this example. clickHandler={this.childClassChangeEvent}. You can call this anything you want to such as clickHandlerEvent to handerClick etc. Just as long as the child calls the property by its name defined by the parent.

Note about onClick event. When calling onClick, use an arrow function onClick={() => {function()}} or it will fire the event while rendering. This was part of ES6 and was adapted into React 0.13.3.

import React, { Component } from 'react'
import ChildClass from './ChildClass';
import ChildFunc from './ChildFunc';
import './Style.css';
export class ParentClass extends Component {
        
    childClassChangeEvent = (event) => {
        alert('Parent Class Component from Child Class Component');
    }

    childFuncChangeEvent = (event) => {        
        alert('Parent Class Component from Child Function Component');
    }

    // OR without arrow function
    // childFuncChangeEvent(event) {
    //     alert('Parent Class from Child Class');
    // }

    render() {
        return (
            <div className="container">                                
            <div class="grid-container">
                <div class="Top">
                    <ChildClass key={1} clickHandler={this.childClassChangeEvent}>Child Class Component</ChildClass>
                </div>
                <div class="Middle">
                    <ChildFunc key={1} clickHandler={this.childFuncChangeEvent}>Child Function Component</ChildFunc>                
                </div>

            </div>
                
                
            </div>
        )
    }
}

export default ParentClass

Parent Function component – ParentFunc.js

Passing the click handler clickHandler={childFuncChangeEvent} do not use this keyword in a function component.

import React from 'react';
import ChildClass from './ChildClass';
import ChildFunc from './ChildFunc';
import './Style.css';

function childClassChangeEvent() {
    alert('Parent Function Component from Child Class Component');
}

function  childFuncChangeEvent() {        
    alert('Parent Function Component from Child Function Component');
}

export default function ParentFunc() {
    
    return (
        <div className="container">                                
            <div class="grid-container">
                <div class="Top">
                    <ChildClass key={1} clickHandler={childClassChangeEvent}>Child Class Component</ChildClass>
                </div>
                <div class="Middle">
                    <ChildFunc key={1} clickHandler={childFuncChangeEvent}>Child Function Component</ChildFunc>                
                </div>
            </div>                        
        </div>
    );
};

Child Class component – ChildClass.js

Since this is a Class component you need to use the this keyword. The onClick={this.props.clickHandler} will need this.props.clickHandler.

import React, { Component } from 'react'
import Button from '@material-ui/core/Button';

export class ChildClass extends Component {
  
    render() {
        return (
            <div>
                <Button variant="contained" color="primary" onClick={() => {{this.props.clickHandler}}>Child Class Button</Button>
            </div>
        )
    }
}

export default ChildClass;

Child Function component – ChildFunc.js

Calling the click handler onClick={props.clickHandler} do not use this keyword with props. It is just props.clickHandler.

import React from 'react';
import Button from '@material-ui/core/Button';

const ChildFunc = (props) => {
    
    return (
        <div>            
            <Button variant="contained" color="secondary"  onClick={() => {{props.clickHandler}}>{props.children}</Button>
        </div>
    );
};

export default ChildFunc;

So using the key word this is reserved for Class Components and not to be used in function components. Everything is sent down in props. Remember what is in between the Child Component tags can be retrieved with props.children in Function components or this.props.children for Class components. So in <ChildComp …>Hello World</ChildComp> , “Hello World” will be inside the props.children (Function) or this.props.children (Class).

Good luck!