In this article, we'll discuss an important concept in React-props. I will make you understand how to pass props from parent to child components in react js. And also I will show you how to use them to keep the flow of data in your app dynamic

What are props in react



We are going to cover the following topics,

Contents

  • Prerequisites
  • What are props in React?
  • How to use props in React?
  • How to use props.children?
  • How to set default values for props
  • Conclusion

Alright, let's get started,

Prerequisites

  • A sample React app.
  • You should know, What components are in React and how to use them?
  • You should know, How to use ES6 features in React 

What are props in React?

We use props in Reactjs mainly to pass data from one component to another (in other words, from a parent component to a child component(s)). Props are just a shorter way of saying properties. Props are useful when you want the flow of data in your application to be dynamic.

below is what my App.js component looks like:

import './App.css';

function App() {
  return (
    <div className="App">


    </div>
  );
}

export default App;

Now, let me create another component called Hello.js. This Hello.js will show information about saying hello to some person. Without props, the code will look something like this:

Hello.js
import React from 'react'

const Hello = () => {

  return (
    <div>
      <h1>Hello, Nagireddy Gajjela</h1>
    </div>
  )
}

export default Hello
Now, let's import the Hello component into the App component. 

App.js
import './App.css';
import Hello from './components/Hello'

function App() {
  return (
    <div className="App">
      <Hello />

    </div>
  );
}

export default App;
Output:-

Let's assume you have a requirement that the Hello component will be reusable across different components to say hello to different people.

React makes it easy for us to import a component's logic without rewriting the code, but the Hello component already has its data hardcoded. This means that we have to either rewrite that logic for every other component or you guessed right – use props to alter the data for different components.

Props allow us to reuse a component's logic dynamically. This means that the data in the component will not be static. So for every other component using that logic, its data can be modified to fit the requirements.


How to use props in React?

In this section, you will learn two ways to use props: 
1. Without destructuring 
2. With destructuring.


How to use props without destructuring?

In case if you want to use props, you have to pass in props as an argument in your function. This is the same way to pass arguments into your regular JavaScript functions. Here's an example:

Hello.js
import React from 'react'

const Hello = (props) => {
  const first = props.firstName
  const last = props.lastName

  return (
    <div>
      {/* you can directly call wilth out assigning  to variable */}
      <h1>Hello, {props.firstName} {props.lastName}</h1>

      <h1>Hello, {first} {last}</h1>
    </div>
  )
}

export default Hello
Now I will explain everything that we have done in the above code, step by step.

Step 1 - Pass in props as an argument

We did that in the first line of the code above: const Hello = (props) => {}. This automatically allows you to use props in your React app's component.

Step 2 - Declare props variable(s)
const first = props.firstName
const last = props.lastName
As you can see above, these variables are different from regular variables because the data in them has to do with props.

If you do not want to create variables for your props, you can go ahead and pass them directly into your template like this: <h1> Hello, {props.firstName} {props.lastName} </h1>

Step 3 - Use variable(s) in JSX template

Now that you have declared your variables, you can go on and place them where you want them to be in your code.

return (
    <div>
      {/* you can directly call wilth out assigning  to variable */}
      <h1>Hello, {props.firstName} {props.lastName}</h1>

      <h1>Hello, {first} {last}</h1>
    </div>
  )

Step 4 - Pass data to props in the App component

We are done creating our props, so the next step is to pass data to them. We have already imported the Hello component and below is the code to pass props to child components

App.js

import './App.css';
import Hello from './components/Hello'

function App() {
  return (
    <div className="App">
      <Hello firstName="NagiReddy" lastName="Gajjela" />

    </div>
  );
}

export default App;


Now you can create data dynamically for any component using the logic defined in the Tool component. You can declare as many props as you want.
import './App.css';
import Hello from './components/Hello'

function App() {
  return (
    <div className="App">
      <Hello firstName="NagiReddy" lastName="Gajjela" />
      <Hello firstName="Nagi" lastName="reddy" />
      <Hello firstName="Siva" lastName="krishna" />
      <Hello firstName="Gopi" lastName="Kishore" />

    </div>
  );
}

export default App;
Output,



Each message is displayed two times as a response because in the Hello component we have written code in such away.

Next, you will learn how to use props with destructuring.

How to use props with destructuring?

The code for this section is entirely the same as in the above section except for the method for declaring the props. 

In the above section, we declared our props this way:
  const first = props.firstName
  const last = props.lastName
But we don't need to do this with destructuring. You can simply do like below

import React from 'react'

const Hello = ({ firstName, lastName }) => {
  return (
    <div>
      <h1>Hello, {firstName} {lastName}</h1>
    </div>
  )
}

export default Hello
The difference is in the first line of code. Instead of passing props as an argument, we destructured and passed in the variables as the function's argument.

Everything else remains the same.

Note that you are not limited to just single variables as your props data, you can equally pass in functions and even data from objects.

How to use props.children?

Below is an example of using props.children in reactjs application

App.js


Hello.js


Output,


How to set default values for props?

If you do not want your props data to be empty when you create them, you can pass in a default value. Here's how to do that:

const Hello = (props) => {
  return (
    <div>
      <h1>Hello, {props.firstName} {props.lastName}</h1>
      {props.children}
    </div>
  )
}
Hello.defaultProps = {
  firstName: "Nagi",
  lastName: "Readdy"
}
export default Hello
In order to define default props, at the end of the code before the component was exported, we declared default values for our props. To do that, we started with the component's name and a dot-connecting it with defaultProps which is built in when you create a React app.

Now, wherever we import this component, those values will be the initial values instead of being blank. When you pass in data to the child component like we did above, it overrides the default values.

Conclusion

In this article,  we almost covered everything you need to get started using props and passing data dynamically across your components.

A good way to understand these concepts is to practice and build a good user interface with them.

Thank you for reading this article.  I'll see you guys in the next one.