From 581eafc04973abf7d8145b5b6efe0bc5a0de7d3d Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 11 Jan 2018 22:47:38 -0800 Subject: [PATCH] Add mini example to top of Render Props --- content/docs/render-props.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index e335915a1..d44208031 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -6,6 +6,18 @@ permalink: docs/render-props.html The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a simple technique for sharing code between React components using a prop whose value is a function. +A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. + +```jsx + ( +

Hello {data.target}

+)}/> +``` + +Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift). + +In this document, we’ll discuss why render props are useful, and how to write your own. + ## Use Render Props for Cross-Cutting Concerns Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.