Скачать или смотреть Render Props Pattern in React | Anuj Singla

Render Props Pattern in React | Anuj Singla #Shorts

About this video:
In this video, I have explained React Render Props Pattern with an example. What is the render props pattern, and how to use it.


Github project: https://github.com/anujsingla/react_d...

React Render Props design pattern:

Render props refers to a technique for sharing code between React components
using props whose value is a function - React Website.

A render props is a function prop that a component uses to know what to render.
The child component takes render props as a function and calls it instead of
implementing its own render logic means we pass a function from the parent
component to the child component, the child component calls that function
instead of implementing its own logic.

export function ParentComponent() {
return (
<div>
Parent Props
<ChildComponent renderProps={() => <div>Render Props</div>} />
</div>
);
}

export function ChildComponent(props: IProps) {
return <div>Child component {props.renderProps()}</div>;
}

Example:
Input change example.
Mouse position example.


Task:
Write one wrapper component which fetches data as per url prop and
pass to the render prop function component. The parent component will render
in the UI.
{props.renderProp(fetchdata)}


Reference:
https://reactjs.org/docs/render-props...
  / use-a-render-prop  

Support my channel:
https://www.buymeacoffee.com/anujsingla

(Free Courses)
React course :- https://bit.ly/3qXnSYU
Javascript course :- https://bit.ly/3qYCG9u
Typescript course :- https://bit.ly/3qY9Fe6
Frontend Interview Questions and Answer -    • Frontend Interview Questions and Answer  
HTML Tutorial for Beginners to advance -    • HTML Tutorial for Beginners to advance  
NPM -    • NPM  
Remix run React framework Tutorial in Hindi -    • Remix run React framework Tutorial in Hindi  

(Social Media Links)
Twitter :   / singla387  
Facebook page : https://bit.ly/3nZlyyx
Telegram : https://bit.ly/3nX2v8f
LinkedIn : https://bit.ly/3rIMt2A



About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, and Typescript. I want to teach web development to everybody.

Tags :-
#designpatterns #react #renderprops #reactdesignpatterns #reactcompoundcomponent #accordion #anujsingla #typescript #hindi #html #css #reacttutorial #reacthindi