Render Props Pattern in React | Anuj Singla #Shorts

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.

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) {
}

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.

Reference:

Support my channel:

(Free Courses)

(Social Media Links)

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