---
title: "How do you pass data from a parent component to a child component in React?"  
description: "How do you pass data from a parent component to a child component in React?"  
author: "Steilla Mitchel"  
published: 2023-10-05  
updated: 2023-10-06  
canonical: https://www.mindstick.com/forum/160034/how-do-you-pass-data-from-a-parent-component-to-a-child-component-in-react  
category: "React js"  
tags: ["javascript", "reactjs"]  
reading_time: 2 minutes  

---

# How do you pass data from a parent component to a child component in React?

How do you [pass data](https://www.mindstick.com/forum/351/how-to-pass-data-from-controller-to-ascx-page) from a [parent](https://www.mindstick.com/blog/154/how-to-find-parent-of-control-in-wpf) [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) to a child component in [React](https://www.mindstick.com/articles/327892/react-why-it-just-makes-sense-for-web-development)?

## Replies

### Reply by Aryan Kumar

In React, you can pass [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) from a parent component to a child component by using props. Props are a way to pass information down the component tree from a parent component to its child components. Here's how you can pass data:

**Parent Component**:

- In the parent component, define the data you want to pass as a prop and include it as an attribute in the child component when you render it.

**Child Component**:

- In the child component, you can access the data passed as a prop using the **props** object.

By passing **passedData** as a prop in the parent component and accessing it using **props.passedData** (or destructuring), you've successfully passed data from the parent to the child component. The child component can now use this data for rendering or any other purpose.

Props are read-only, meaning that the child component should not modify them directly. They represent data passed from the parent, and any changes or updates to the data should be managed in the parent component, which can then be passed down to the child component as needed.

This mechanism allows for the creation of reusable and configurable child components that can display data or behavior based on the values passed in as props from their parent components.


---

Original Source: https://www.mindstick.com/forum/160034/how-do-you-pass-data-from-a-parent-component-to-a-child-component-in-react

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.