DEV Community

Cover image for Props Drilling . . .
_Khojiakbar_
_Khojiakbar_

Posted on

1

Props Drilling . . .

1. Setting Up the Pirates (Components)

We'll create a Captain, FirstMate, SecondMate, ThirdMate, and FourthMate component. The Captain will pass the "treasure map" (prop) down through each level to finally reach the FourthMate.

2. Props Drilling in Action

import React from 'react';

// Fourth Mate (Deep Child Component)
const FourthMate = ({ map }) => {
  return (
    <div>
      <h2>Fourth Mate</h2>
      <p>Arrr! I got the treasure map: {map}</p>
    </div>
  );
};

// Third Mate (Child Component)
const ThirdMate = ({ map }) => {
  return (
    <div>
      <h2>Third Mate</h2>
      <FourthMate map={map} />
    </div>
  );
};

// Second Mate (Child Component)
const SecondMate = ({ map }) => {
  return (
    <div>
      <h2>Second Mate</h2>
      <ThirdMate map={map} />
    </div>
  );
};

// First Mate (Child Component)
const FirstMate = ({ map }) => {
  return (
    <div>
      <h2>First Mate</h2>
      <SecondMate map={map} />
    </div>
  );
};

// Captain (Parent Component)
const Captain = () => {
  const treasureMap = "X marks the spot!";

  return (
    <div>
      <h1>Captain</h1>
      <p>"Ahoy! Take this map and find the treasure!"</p>
      <FirstMate map={treasureMap} />
    </div>
  );
};

// App Component
const App = () => {
  return (
    <div>
      <Captain />
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

3. Explanation

  • Captain Component: The parent component holds the treasureMap data and starts the props drilling by passing it to the FirstMate.

  • FirstMate Component: Receives the map prop from Captain and passes it to SecondMate.

  • SecondMate Component: Receives the map prop from FirstMate and passes it to ThirdMate.

  • ThirdMate Component: Receives the map prop from SecondMate and passes it to FourthMate.

  • FourthMate Component: Finally receives the map prop and displays it.

This code mimics the pirate crew passing the treasure map down through the ship's decks until it reaches the one who needs it most!

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay