Props drilling

What is props drilling: This is a method in which a data is passed from one parent component to one or more child components through multiple levels. The data which is being passed from parent to child component is done using props.
The data can be passed through multiple layers of component even if the middle component don't use the data.

Ex:

function App() {
  const user = "657879";
  // const [mobile, setMobile] = useState(987654321);

  return (
    <div>
      <Home user1={user} />
      {/* <About/>
      <Contact/> */}
    </div>
  );
}

function Home({ user1 }) {
  return (
    <div>
      <h1>Home</h1>
      <About user2={user1} />
    </div>
  );
}

function About({ user2 }) {
  return (
    <div>
      <h1>About</h1>
      <Contact user3={user2} />
    </div>
  );
}

function Contact({ user3 }) {
  return (
    <div>
      <h1>Contact = {user3}</h1>
    </div>
  );
}

export default App;

In the above code, App passes the user1 prop to Home.
Next, Home passes the user2 to About.Then About passes user3 prop to Contact. Finally, the value will be displayed in Contact.

Output: