🤝Prop Drilling

Prop drilling occurs when you need to pass data through multiple layers of components...Each component it goes through has also access to passing data.

🌱 Main Component calling sub-component with passing parameter

import ComponentA from "./ComponentA";

const App = () => {
  const name = "HuXn";
  
  return <ComponentA name={name} />;
};

export default App;

🗝️ Executing Sub-component A and returning to main component

import ComponentC from "./ComponentC";

const ComponentA = ({ name }) => {
  return <ComponentC name={name} />;
};

export default ComponentA;

🗝️ Executing Sub-component C and returning to component A

const ComponentC = ({ name }) => {
  return <h1>{name}</h1>;
};

export default ComponentC;