prop drilling is good - Interview Questions https://www.wikitechy.com/interview-questions/tag/prop-drilling-is-good/ Interview Questions Wed, 04 May 2022 05:47:10 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 What is Prop Drilling ? https://www.wikitechy.com/interview-questions/reactjs/what-is-prop-drilling/ https://www.wikitechy.com/interview-questions/reactjs/what-is-prop-drilling/#respond Mon, 28 Mar 2022 05:39:45 +0000 https://www.wikitechy.com/interview-questions/?p=4009

  • 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:

]]> https://www.wikitechy.com/interview-questions/reactjs/what-is-prop-drilling/feed/ 0