<\/p>\n

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

  <\/p>\n

   <\/p>\n

  <\/p>\n

  For example,<\/strong><\/p>\n

  <\/div>

    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;<\/code><\/pre> <\/div>\n
   <\/p>\n
  Output:<\/strong><\/p>\n
  <\/p>\n","protected":false},"excerpt":{"rendered":"
  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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16790,16804,16795,16791,16800,16798,16796,16797,16794,16792,16803,16789,16802,16793,16801,16799],"class_list":["post-4009","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-avoid-prop-drilling-with-react-context","tag-how-to-avoid-prop-drilling","tag-how-to-avoid-prop-drilling-in-react","tag-prop-drilling","tag-prop-drilling-is-good","tag-prop-drilling-react-hooks","tag-prop-drilling-vs-context","tag-react-prop-drilling-example","tag-react-prop-drilling","tag-the-upsides-of-prop-drilling-in-react","tag-what-is-prop-drilling-and-how-can-you-avoid-it","tag-what-is-prop-drilling-and-how-to-avoid-it","tag-what-is-prop-drilling-in-react","tag-what-is-react-prop-drilling","tag-what-problem-does-context-api-solve","tag-why-is-prop-drilling-bad"],"yoast_head":"\n