From 520520306ce028ec57db6fefd279f309eff3d930 Mon Sep 17 00:00:00 2001 From: Frazer Kirkman Date: Wed, 10 Feb 2021 22:59:28 -0800 Subject: [PATCH] Example of HOC shows wrapped components. Update example of HOC to show the simplified wrapped components. This makes it clearer how the simplification works. --- content/docs/higher-order-components.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 8d97b61ce73..ad2eca6be47 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -108,14 +108,27 @@ class BlogPost extends React.Component { You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share it across many components. This is where higher-order components excel. -We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription`: +We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription` ```js + +const CommentList = (props) => ( +
+ {props.data.map((comment) => ( + + ))} +
+); + const CommentListWithSubscription = withSubscription( CommentList, (DataSource) => DataSource.getComments() ); +const BlogPost = (props) => { + return ; +} + const BlogPostWithSubscription = withSubscription( BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id)