- 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,
[pastacode lang=”markup” manual=”%20%20import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0A%20%20%0Afunction%20Parent()%20%7B%0A%20%20const%20%5BfName%2C%20setfName%5D%20%3D%20useState(%22firstName%22)%3B%0A%20%20const%20%5BlName%2C%20setlName%5D%20%3D%20useState(%22LastName%22)%3B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3Cdiv%3EThis%20is%20a%20Parent%20component%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%3CChildA%20fName%3D%7BfName%7D%20lName%3D%7BlName%7D%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%20%20%0Afunction%20ChildA(%7B%20fName%2C%20lName%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20This%20is%20ChildA%20Component.%0A%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%3CChildB%20fName%3D%7BfName%7D%20lName%3D%7BlName%7D%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%20%20%0Afunction%20ChildB(%7B%20fName%2C%20lName%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20This%20is%20ChildB%20Component.%0A%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%3CChildC%20fName%3D%7BfName%7D%20lName%3D%7BlName%7D%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%20%20%0Afunction%20ChildC(%7B%20fName%2C%20lName%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20This%20is%20ChildC%20component.%0A%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%3Ch3%3E%20Data%20from%20Parent%20component%20is%20as%20follows%3A%3C%2Fh3%3E%0A%20%20%20%20%20%20%3Ch4%3E%7BfName%7D%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Ch4%3E%7BlName%7D%3C%2Fh4%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%20%20%0Aexport%20default%20Parent%3B%0A” message=”” highlight=”” provider=”manual”/]
Output:
