Skip to main content

Featured

Java Interview Questions for Senior Full Stack Developer

Subscribe to our YouTube Channel to know interview questions

React Part 5 - Parent Child Component Communication in React

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

Comments

Trending Tutorials

Trending Tutorials

WebSocket With Spring Boot and Angular 6 Tutorial

In this tutorial, we will understand What is WebSocket? Why to use WebSocket? Polling vs Server Sent Events vs WebSocket and WebSocket Example with Spring Boot + Angular 6 + STOMP

Code Coverage with JaCoCo Sonar and Maven

In this tutorial, we will understand the importance of code coverage and how can we setup the Sonar + JaCoCo + Maven to get the code coverage. We will look into Setting up Sonar Server Locally, Integrate JaCoCo plugin with Sonar and Maven for Code Coverage, Find Code Coverage in Eclipse : EclEmma Configuration

Java 8 Features

Learn all about Java 8 features in details

Lambda Expression in Java 8

Ever wonder what Lambda Expression is? What Lambda expressions are compiled to? if no then you should go through this tutorial to know more about Lambda and how they are different than anonymous class.

Popular Posts