cinextech
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog
No Result
View All Result
cinextech
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog
No Result
View All Result
cinextech
No Result
View All Result
Home React

How to Pass Data Child to Parent component in React Js (callbackprops)?

Admin by Admin
May 8, 2023
in React, Programing
1
Share on FacebookShare on Twitter
play icon Listen to this article

Welcome to our new blog, here we will discuss how to Pass Data from Child to Parent in React. To pass data from the child component to the parent component we use callbackprops.

Callbacksprops are a powerful tool in React for passing data between components. Here’s one example:

Table of Contents

  • You might also like
  • Stop Using && operator for Conditional Rendering in React
  • Evolution of the Web: Differences Between Web 1.0, Web 2.0, and Web 3.0

You might also like

&& operator in javaScript

Stop Using && operator for Conditional Rendering in React

May 24, 2023
Evolution of the Web:  Differences Between Web 1.0, Web 2.0, and Web 3.0

Evolution of the Web: Differences Between Web 1.0, Web 2.0, and Web 3.0

May 9, 2023
import React, {useState, useCallback} from "react";

function ParentComponent() {
    const [message, setMessage] = useState(‘Hello, world!’);
    const handleClick = useCallback((newMessage) => setMessage(newMessage), []);

    return (
        <ChildComponent message={message} onClick={handleClick} />
    );

}


function ChildComponent({ message, onClick }) {
  const handleClick = useCallback(() => onClick(‘Hello, callback!’), [onClick]);
  
  return (
    <div onClick={handleClick}>
      {message}
    </div>
  );
  
}

In this example, the state of the parent component holds a message. The parent component also has a handleClick function. when the function is called, it will change the state.

The current message and the handleClick function are passed to the child component as props by the parent component. The child component has a button, when the button is clicked, It calls the props that passed to the handleClick function.

Tags: callbackprops
Admin

Admin

Skilled Blockchain developer with a deep interest in emerging technologies, Also writes well-versed content on the latest news and advancements related to AI, Blockchain, NFTs, and cloud computing. Also, I provide expert insights into the future of technology.

Related Posts

&& operator in javaScript
React

Stop Using && operator for Conditional Rendering in React

by Admin
May 24, 2023
Evolution of the Web:  Differences Between Web 1.0, Web 2.0, and Web 3.0
Web Development

Evolution of the Web: Differences Between Web 1.0, Web 2.0, and Web 3.0

by Admin
May 9, 2023
useCallback vs useEffect: What is the main difference between them?
React

useCallback vs useEffect: What is the main difference between them?

by Admin
May 8, 2023
A Brief Introduction to GitHub Workflow
GitHub

A Brief Introduction to GitHub Workflow

by Admin
May 7, 2023
Fix React Router URL's issue with HashRouter
React

Fix React Router URL’s issue with HashRouter

by Admin
May 6, 2023
Next Post

What is Virtual DOM in React?

Comments 1

  1. Pingback: useCallback vs useEffect: What is main difference in between? - CinexTech
CinexTech

CinexTech is the premier and most trustworthy resource for all happenings in technology, business, and education news in the world.

  • About
  • Blog
  • Contact
  • Guest Post Guidelines for CinexTech.com
  • Home

© Copyright 2023 - Cinextech.com

No Result
View All Result
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog

© Copyright 2023 - Cinextech.com

Table of Contents

×
  • You might also like
  • Stop Using && operator for Conditional Rendering in React
  • Evolution of the Web: Differences Between Web 1.0, Web 2.0, and Web 3.0
→ Index