Parent Child Component Communication in React

November 11, 2019 Saurabh Oza ReactJS, UI Framework 0

Parent Child Component Communication in React

What we have learned so far?

Part 1 – Hello Word in React?
https://onlyfullstack.blogspot.com/2019/11/create-reactjs-app-hello-world.html

Part 2 – JSX in React
https://onlyfullstack.blogspot.com/2019/11/jsx-in-react.html

Parent to Child component communication in React

1. React props
We can use props to do the communication in between Parent and child component in React.

import React from 'react';

export default function Child(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. React Context
In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Child to Parent component communication in React with callback

We can give callback to child component to do the communication from child to parent. In below example we have given a callback named as handleCloseWithCallback.

we can call that method with the passed prop name to send any data to parent component from child component.

export default function Child(props) {
  return (
    <div>
      <h2>Child to parent component communication</h2>
      <h3>Hello, {props.name}</h3>
      <button onClick={() => props.handleCloseWithCallback("childprop")}>
        Close with callback
      </button>
    </div>
  );
}

Lets go to our next tutorial where we will discuss below points :

Part 6 – React Forms with Input text, Checkbox, Radio Buttons and Dropdown

 – React Form with Input text
 – React Form with Checkbox
 – React Form with Radio Button
 – React Form with Dropdown list
https://onlyfullstack.blogspot.com/2019/11/react-forms-with-input-checkbox-radiobutton-dropdown.html

Source Code
You can edit and play with the react examples on below stackblitz site – 
https://stackblitz.com/@onlyfullstack

React Tutorial
https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html