Hello everyone 😌!!

We all know that Communication is key even in programming. Being able to pass information to where it's needed is essential.

Today we are going to talk about Parent Child Communication in React.

Shall we ?

Imagine you want to pass data from a parent component to a child component. Then Props becomes very useful unlike states. Read more about state in react here

https://caesarsage.hashnode.dev/understand-state-in-lessreact-greater-hooks

Props are a special keyword in React which is short for 'properties' and they are used to pass data between React components. The following should be noted when using props:-

Data with props are being passed in a uni-directional flow. (one way from parent to child only)
Data with props are read-only. i.e the data coming from the parent component must not be changed or altered by the child components.

In this article we will see ways on how to use it by building a simple react-app.

SHALL WE ?

Using the react-cli in your terminal

npx create-react-app props-tutorial

You should see a file structure as shown below

Delete all the content inside App.js and replace with

import React, { useState } from 'react'
import { Child } from './child'

const persons = [
  { id: 1, name: "caesar", age: 3 },
  { id: 1, name: "mary", age: 5 },
  { id: 1, name: "john", age: 4 }
];

const App = () => {
  const [person, setPerson] = useState(persons)

  return (
    <div>
      {person.map((item)=>{
        return <Child key={item.id} /> 
      })}
    </div>
  )
}

export default App

The above react code simple describe our parent component. Our mission is to pass the persons data to a child component but first since it is an array, we first iterate through items in the person data and return (no data has been passed to it now, don’t border about the key) hence

return (
    <div>
      {person.map((item)=>{
        return <Child key={item.id} /> 
      })}
    </div>
  )

In your src folder create a child.js file and input the following code: import React from 'react'

export const Child = (props) => {

  return (
    <div>
      waiting for the parent
    </div>
  )
}

The code above you see the child taking an argument “props”. But since the parent is not passing any data yet. Then the console.log(props) will be an empty object

Now our structure

App.js = The parent component that has the data we want to pass
Child.js = The child component that wants to receive the data from the parent component

Method to follow when using props :-

Pass the data to the Child Component from the Parents:- Some ways to pass data are :-
- Defining Attribute(can be any name) and Data
- Passing to entire object
- Using spread operator.
Access the passed data from the child component

Pass the data to the Child Component from the Parents:

Now from our code demo

Defining Attribute(can be any name) and Data
we can assign an attribute to our component and its data as :-

 {person.map((item)=>{
   return <Child key={item.id} name={item.name} age={item.age} />
 })}

See that each data needed is given an attribute ‘in our case, name and age’ then passed to the data. The disadvantage of this is that you will always need to declare each attribute and date pair for every update on the persons list. A better approach is the Pass to the entire object.

Passing to the entire object

{person.map((item)=>{
 return <Child key={item.id} person={item} />
})}

Using spread operator

An even better way is to spread out(copying) all the properties instead of assigning them to an object :-

return (
    <div>
      {person.map((item)=>{
        return <Child key={item.id} {...item} />
      })}
    </div>
  )

Access the passed data from the child component :

Now that the data has been passed to the child, its left for the child to now access those properties(props):

Let’s also consider the three method to access in relationship to passing data

When we define each attribute(can be any name) and data

We can access the data by simple using the props(can be named anything) in the Child components argument as :-

import React from 'react'

export const Child = (props) => {

  return (
    <div>
      My name is {props.name} and i am {props.age}
    </div>
  )
}

See as the props argument is accessing the name and age attribute we gave to the child when passing it from the parent components.

Yeah, you run your code with npm start to see all your data display correctly.

When we passed to the entire object

When this is done we access the props by considering the item we passed, so we are not directly accessing the object data

export const Child = (props) => {

  return (
    <div>
      My name is {props.item.name} and i am {props.item.age}
   </div>
  )
}

When we used spread operator

And to access the properties, we can destructure it at the Child component arguments instead of the hardcoded ‘props’:

import React from 'react'

export const Child = ({name, age}) => {

  return (
    <div>
      My name is {name} and i am {age}
    </div>
  )
}

Simple data instead of an object that we used in our example here can also be sent as props but using any of these three approaches.

Cover Credit : Chafik Gharbi

Thanks for Reading!!!

Kindly Share, like and comment your thoughts!

Parent To Child Communication with React Props