Overview Of Props In ReactJS

Props 

In this article you will learn about PROPS in REACTJS and get the answers to the following questions:

1. What are Props?
2. What is Unidirectional data flow?
3. Examples of passing the props and receiving the props?
   1. How to pass one props to a component?
   2. How to pass multiple props to a component?
   3. How to pass an object as props to the component?
   4. How to pass an array as props to the component?

1. What are Props?

Props is an abbreviation of Properties. In ReactJS we use props to pass the data from one component to another. That means parent component to child component.

Data coming from a parent component to a child component in a parameterized way is called props. Props are immutable (read-only) which means you can not modify the value of props at the receiver end component. You can pass one props or multiple props at a time. Using props you can pass any type of data available in JavaScript - such as string, integer and boolean, arrays and object.

2. What is Unidirectional data flow?

Unidirectional (moving or operating in a single direction) data flow is a technique that is found in functional or component reactive programming. In ReactJS flow of data is in one direction, i.e. from parent to child. 

3. Examples of pass the props and receiving the props?

3.1. How to pass one props to a component?

import React from "react";
function App() {
  return (
    <div>
      <Welcome fullname="Suhana Ashish Kalla" />
    </div>
  );
}
function Welcome(props) {
  return (
    <h2>
      Hello! Welcome {props.fullname} ReactJs Tutorial Series.
    </h2>
  );
}
export default App;

Code Explanation

In the above example, we are passing fullname props to the Welcome component.

Output

3.2. How to pass multiple props to a component?

import React from "react";
function App() {
  return (
    <div>
      <Welcome fullname="Suhana Ashish Kalla" hobbies="playing games" />
    </div>
  );
}

function Welcome(props) {
  return (
    <>
    <h2>Hello! Welcome {props.fullname}.</h2>
    <p>Your Hobbies: {props.hobbies} </p>
   </>
  );
}
export default App;

Code Explanation

In the above example, we are passing multiple props fullname, and hobbies props to the Welcome component.

Output

3.3. How to pass an object as props to the component?

import React from "react";
function App() {
  const obj = {fullname: 'Suhana Kalla', city: 'London', country: 'UK'};
  return (
    <div>
      <Friend  friendobj={obj} />
    </div>
  );
}

function Friend({friendobj}) {
  return (
    <div>
      <h2>{friendobj.fullname}</h2>
      <h2>{friendobj.city}</h2>
      <h2>{friendobj.country}</h2>
    </div>
  );
}
export default App ;

Code Explanation

In the above example, we are passing obj which has properties/fields fullname, city, and country. We created obj in APP component and passed it to the Friend component, "obj" consumed in the name of "friendobj" in the Friend component. 

Output

3.4. How to pass an array as props to the component?

import React from "react";
function App() {
  const FriendArr = ['Ashish', 'Suhana', 'Niru', 'Manoj'];
  return (
    <div>
      <FriendList arr={FriendArr} />
    </div>
  );
}
function FriendList({arr}) {
  return (
    <div>
<h2>Friend List</h2>
      {arr.map(title => {
        return <div key={title}>{title}</div>;
      })}
    </div>
  );
}
export default App;

Code Explanation

In the above example, we are passing Array called "FriendArr" which has a total of four friends' names.

From the App component, we passed it to FriendList component.

Output

Happy Learning and Coding.