A Guide to Passing Data Using Props in React
Tags: javascript, react, frontend, webdev
Published: 2023-09-08 09:21:18


![Cover Photo](https://cdn.hashnode.com/res/hashnode/image/upload/v1693686192186/8392ec92-6cff-44e9-bf87-560a3ac2156f.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)


## **Introduction**

The React framework is very popular for this is its ability to build dynamic user interfaces. In your journey of learning React, you will encounter the concept of Components and how they communicate. Think of components as the foundation on which react user interfaces are built.

In this tutorial, you will learn about:

- React and its Component.

- The concept of props and data transfers between React Components.

- Effective components communicate using props.

All code examples can be accessed [here](https://github.com/HalalTechBro/react-props-tutorial)

## Prerequisites.

- Basic knowledge of JavaScript ES6 syntax.

- Basic command line knowledge.

- Basic knowledge of HTML.

Nice to have:

- Basic React knowledge.

# **React and Its Components**

# **What is React?**

React is an open-source front-end JavaScript framework containing reusable functions used for creating dynamic user interfaces. Created by Facebook in 2013, it has become the most widely-used front-end framework.

# **What is a React Component?**

React components are isolated blocks of functions used to implement specific functionalities and build user interfaces. To achieve the dynamic state required, they need to receive data to interact with themselves. They can be created and updated by the developer. Updating the component model updates the user browser. Think of a component model as a tree with a component at the top. The component at the top is called the root/parent component.

![Simple to-do list React App Component Structure](https://lh3.googleusercontent.com/A2Mh6TfeCnreAgF6qoiuMZcbr5Hg38WM_LKi2FDWQPyYJ_eqaSKsshWNlDSOOUpaMqCYeIKQGRGllBayF8al3LV2YJXimU3UqEblPcrTaKTp_MGtMBs78j0Vc4mJQKzSh7HNHzh7jr7EMg8ryzBTwPI)

The diagram above represents a simple Todo list component tree structure.

The **App** component at the top represents the root/parent component. It oversees everything. It contains two children components: **Add Item** and **Todo Items.**

The **Add Item** contains two components: Text-Input- a text field where you can write a new item, and **Add Button** - a button that adds what you have written to your Todo list.

The **Todo items** also contain two components. The components are the Todo list items added. Note that it could be more than two in this case.

When you click on a button, events happen at a component and they can affect other parts of the codebase. For instance, when the **Add Button** is clicked, it tells the **App** component to add a new task. The text entered is sent to the **Todo Items** through the **App** component. This action adds a new item, and then the UI updates as the component changes.

In conclusion, React components are building blocks that help us create dynamic websites and applications. They work together to ensure the application displays and functions well.

## **Why do we need to Pass Data between Components?**

React relies majorly on its component model. But how will these components be reactive to each other? For instance, from the example above, how will the **Add Button** component know that data should be sent to the **Todo Items** component when an event is triggered? Here is where the passing of data comes in. It is a crucial aspect of building efficient and dynamic user interfaces. It enables you to build complex UIs that can be made simpler by creating reusable and modular components.

# **Understanding Props in React**

To use Props effectively, it is important to understand how it works, including how it is used to pass data between components.

## **The Concept of props in React**

Props(properties) is a technique of passing data from one component to another. With props, the parent component can share data with the child component. The child component then renders this data to the UI.

Props are immutable. When passed to the child component, they cant be updated but can still be accessed and used. This attribute helps maintain a clear separation between parent and child components.

## **How do props fit into the data flow in React?**

In React, data flows in a unidirectional manner. It travels from the parent component to the child component only. Here is a step-by-step process of how data flows in React components.

1. Data flow starts from the parent component. This data can be from an API

2. The data in the parent component is transferred to its child component by props.

3. The child component receives, accesses, and uses the data. Here is where the data consumption takes place. The data is rendered as UI elements or for other functions.

4. The data is then dynamically rendered as content on the UI. It is interpolated with [Javascript XML(JSX)](https://react.dev/learn/writing-markup-with-jsx) to display the data as an output on the screen.

5. Data changes in the parent component result in new data inflow to the child component, making the application re-render.

6. Since data flow is unidirectional, the flow stops at the child component.

![A Schematic Diagram Describing the Flow of Data in React Components.](https://lh4.googleusercontent.com/qYTHGAt_tKT4LEMZCjIdlICeMs444ViP2TJj2ezzSJ1NGFnKc0azUj5PKWuvvHuLbUsV0Zjl43b4Y6VEQLmbiIjb18cifZGpy0N-U5p3GOdWTuoYrW5cQdJoDcGyOQcrUJQhsEU3ICGV-HeOZ3jhDX4)

# **Transferring Data from Parent to Child Component**

As discussed, passing data between components is an essential feature in React. To master it, start by making a simple React application with the Vite tool in your terminal and type in `npm create vite@latest reactProps -- --template react.`

Navigate to the directory with this command `cd reactProps` **.**

Next is to install all the dependencies by executing this command `npm install` **.**

The file tree should look like this.

![Code File tree structure](https://lh5.googleusercontent.com/TFMZxdH8h1dmQ1buzsG5zrKheFVzZ1s7oSq3RseI4t4aKj7GaxR8abvc-t84w8sM2qUG37qg49kduKGWhujPON71TP97DqwxlY4MDOVuGZYwPJcASZeogOBxXnxqftc4RXhBvCGPilZE6_pFFmj1zLI)

## **Creating Components**

Firstly, open the _App.jsx_ file in the src folder and replace the code there with the one below. All code examples will run on this file.

_src/App.jsx_

```
const App = () => {
  return (
    <div>
      <p>Hello world</p>
    </div>
  )
}
export default App

```

This code defines a functional React component named `App.` This component renders a `div` containing an `h1` element with the text **_Hello world_** and a `p` element with the text **_I am a React Component_.** To make it available in other parts of the codebase, the file must be exported.

In the _src_ folder's _main.jsx_ file, the following code block imports the `App` component from the _App.jsx_ file and renders the content of the `App` component in the `div` element with the `id` value of `root` defined in the _public/index.html_.

```
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

```

Here is what the code outputs.

![Code output](https://lh6.googleusercontent.com/JwnYRY1T8ZHdb5_k2W5-10Yw9UJH56A8dpeCgWR7TLiROdjKNjoMu-2pL1_mPKy444fbc0K5sQEjd5Yl78z9TqTYSMdp-BRvzi4iuNFc-i_NzP5KY7VH_TUD5UyCOYv-y2iNVgy3Q9F8psT-S9Ykhs4)

You can remove _App.css_ and _index.css_ files from the project folder since all code examples are executed on the _src/App.jsx_ file.

## **Passing Props to a Component**

To begin, import `propTypes` from the `'prop-types'` library. This library ensures that the correct type of props are passed to a component.

Afterward, build a component named `Message` that will accept a prop named `greeting` and display a message within it. Using the return statement, tell the component what to render.

Finally, indicate that the `greeting` component can accept any React node and make it a requirement when employing the `Message` component. A React node can be a variety of things, such as a string, number, JSX, and more.

_src/App.jsx_

```
import propTypes from 'prop-types'

const Message = (props) => {
  return (
    <div>
      <p>{props.greeting}</p>
    </div>
  )
}

Message.propTypes = {
  greeting: propTypes.node.isRequired
}

```

In the _src/App.jsx_ file, replace the code inside the div element with the code below in the `App` component.

```
<Message greeting="Greetings from the Child Component" />

```

Here is what the code outputs.

![code output](https://lh4.googleusercontent.com/KyU5ebSNQ8pwHWlEBhSKpL-LDKNJooXVemUKzyLxd0HoWWrLDvrpjmxLjwUa94mGinPMW8nPUSDdXJpY74ugzexkV31__-FDVJg_j3cirJO0phDYW15biucTJFr1CjqCMFm5WwfCxAn9-nmwwB6LXQ8)

## **Destructuring Props Object**

The JavaScript ES6 destructuring syntax can extract specific props from the props object. Here, the name and age props are directly removed.

_src/App.jsx_

```
const Profiles = ({ name, age }) => {
  return (
    <div>
      <p>
        Hello {name}. Your age is {age}
      </p>
    </div>
  )
}

Profiles.propTypes = {
  name: propTypes.node.isRequired,
  age: propTypes.node.isRequired
}

```

Replace the code inside the `div` element in the parent component with the code below.

_src/App.jsx_

```
<Profiles name={name} age={age} />

```

## **Setting Default Value for a Prop**

Default values can be set to props in the child component, providing a fallback when nothing is specified. For instance, in the Profile component, you can set a default value of "John Doe" to the name prop. If not defined, the name prop will assume the value of "John Doe". Check out the code below for an example of how this works.

_src/App.jsx_

```
const Profiles = ({ name = 'John Doe', age }) => { 
}

```

## **Propagate Props with JSX Spread Syntax**

JSX spread syntax is a technique for passing properties from parent and child components. This involves the parent component collecting and spreading the properties to the child component. You will examine this technique in the example below.

Firstly, import the `PropTypes` module from the `prop-types` package. It defines the expected type of prop for the component.

Then create a Component named `Avatar` that receives a prop and displays information about a person. The received prop object is broken down into the `person` prop. Then, the `div` element in the component gets displayed on the screen.

Finally, for this component, assign a `propTypes` property to it. This property confirms the incoming `person` prop. The `person` prop can be of various types and is required when the component is being utilized.

_src/App.jsx_

```
import PropTypes from "prop-types"

const Avatar = (props) => {
  const { person } = props

  return (
    <div>
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
      <p>Occupation: {person.occupation}</p>
      <p>Country: {person.country}</p>
    </div>
  )
}

Avatar.propTypes = {
  person: PropTypes.node.isRequired,
}

```

Create a new component called `Profile`. This component will receive the prop and display the `Avatar` component using the spread syntax instead of passing individual items to be displayed separately.

_src/App.jsx_

```
function Profile(props) {
  return (
    <div>
      <Avatar {...props} />
    </div>
  )
}

```

To complete this setup, it is necessary to create the final component named `App`. This component defines an object that includes the `avatarProps` object with multiple properties. The `App` component displays the `Profile` component that accepts the `avatarProps` through the spread syntax.

Always remember to export the parent component to ensure proper functionality.

```
export default App

```

Here is what the code outputs.

![code output](https://lh3.googleusercontent.com/-GgMBi9wGsKcvO-TGB_lzkVMHDR9TOBAkgETFFQUAHXCNk0Vg9FzmbSmze8GrdmWpTUM_Ue3tciGwNZSnWjKd3c3ahVcb2Pi5I6m11Tnk77ZLqzZ3n9pqEhN_w7FOd4t0Zwmbb4Sv9fjPxNUeuTMgDE)

In the example above, the spread syntax was used twice. This syntax allows all props received to be passed from the `Profile` component to the `Avatar` Component at once, eliminating the need to list them individually.

The `avatarProps` object is passed to the `Profile` component using the spread syntax with its properties being transferred as separate props to the `Profile` component. This approach offers the benefit of forwarding all props from the top component (i.e., the _App_ component) to the `Avatar` component.

## **Passing JSX as Children Prop**

To render JSX content within a component, JSX is used as a child prop. It is placed between the opening and closing tags of the component, and it is treated as dynamic content by the component's rendering logic.

To implement this, create a component named `Modal`that uses the `children` prop to receive and render JSX content passed between its tags. Note that the `children` must be provided when using the Modal component. It is necessary to import `PropTypes` for this purpose.

_src/App.jsx_

```
import PropTypes from "prop-types"

const Modal = ({ children }) => {
  return <div>{children}</div>
}

Modal.propTypes = {
  children: PropTypes.node.isRequired,
}

```

The `Modal` component is rendered by the `App` component with JSX elements defined between its opening and closing tags.

_src/App.jsx_

```
const App = () => {
  return (
    <div>
      <Modal>
        <h2>Welcome to the Modal!</h2>
        <p>This is some content within the modal.</p>
      </Modal>
    </div>
  )
}

export default App

```

Here is what the code outputs.

![](https://lh4.googleusercontent.com/IcpW99T2vtbByJ3_qbOhB8hCs3uO00u7oaDPKhL8yctsxz8eDdMesKg9wHAMbHXFc9JIe3G_ZgX1fOdC7CUoLGcMmQlFfoAONPHNOgHfPK_45Rr1q3y7wVnR02ePpu8yR-0rf15YHHGJgbZ_V2EKtx8)

# **Conclusion.**

This guide introduced you to the world of React Components and the role they play in displaying dynamic user interfaces. You were introduced to the world of props and clarified the concept behind it.

Understanding how info and data are passed between parent and child components will come in handy in your React mastering journey. It gets more intricate than this going forward, so brace yourselves.

The good news is that it builds upon the foundation already treated in this guide. What would you like to learn about next? Let me know in the comments.

**Found this article helpful?**

Feel free to find me around the web for questions and clarifications.

- [**Follow on Twitter**](https://twitter.com/iamaamunir?t=idkHdYacam5AHz5z1myBrQ&s=09)

- [**Connect on LinkedIn**](https://www.linkedin.com/in/munir-a-abdullahi-917051203)

- [**Projects on**  **GitHub**](https://github.com/iamaamunir)

Thanks for reading to the end.