What is Prop Drilling ?

  • We pass a prop with another component with the help of all the components that come between, this method is known as prop drilling.
  • Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
  • We refer prop drilling to the process of sending props from a higher-level component to a lower-level component.

 

For example,

  import React, { useState } from "react";
  
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    <>
      <div>This is a Parent component</div>
      <br />
      <ChildA fName={fName} lName={lName} />
    </>
  );
}
  
function ChildA({ fName, lName }) {
  return (
    <>
      This is ChildA Component.
      <br />
      <ChildB fName={fName} lName={lName} />
    </>
  );
}
  
function ChildB({ fName, lName }) {
  return (
    <>
      This is ChildB Component.
      <br />
      <ChildC fName={fName} lName={lName} />
    </>
  );
}
  
function ChildC({ fName, lName }) {
  return (
    <>
      This is ChildC component.
      <br />
      <h3> Data from Parent component is as follows:</h3>
      <h4>{fName}</h4>
      <h4>{lName}</h4>
    </>
  );
}
  
export default Parent;

 

Output:

Leave a Reply

Your email address will not be published.

You May Also Like

What is React DOM ?

It is an object which exposes a number of top level APIs to interact with the browser DOM. It provides DOM-specific methods that can be used at the top level…
View Answer

What is Flux ?

It is an application architecture that Facebook makes use of internally for constructing the client-side web application with React . It is a programming concept, where the data is a…
View Answer

What is React Hooks ?

Hooks are the new feature added in the React 16.8 It lets you use state and different React functions without writing a class. React concepts does not replace your knowledge.…
View Answer