From 96d302aef00a0d9f1f47d5935bed3d230256d7f9 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 11 Jan 2018 23:20:57 -0800
Subject: [PATCH 1/3] Add "Using Props Other Than Render" to Render Props

---
 content/docs/render-props.md | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index d4420803..18941f67 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -297,3 +297,42 @@ class MouseTracker extends React.Component {
 ```
 
 In cases where you cannot bind the instance method ahead of time in the constructor (e.g. because you need to close over the component's props and/or state) you should extend `React.Component` instead.
+
+## Using Props Other Than `render`
+
+Although the examples above use `render`, any prop can be used to implement the render prop pattern. For example, the component below passes a function as the `children` prop:
+
+```js
+<WithTitleAsync url="/my/api/books/123">
+  { ({ title }) => <h1>{title}</h1> }
+</WithTitleAsync>
+
+class WithTitleAsync extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { title: null };
+  }
+
+  componentDidMount() {
+    fetch(this.props.url)
+      .then(
+        ({ title }) => { this.setState({ title }) },
+        (error) => { this.setState({ error }) }
+      )
+  }
+
+  render () {
+    if (this.state.error) {
+      return <span>Title Not Found</span>;
+    } else if (!this.state.title) {
+      return <span>Getting Title...</span>
+    } else {
+      return this.props.children(this.state.title);
+    }
+  }
+};
+
+WithTitleAsync.propTypes = {
+  children: PropTypes.func.isRequired,
+};
+```

From ac34b9c696da78ab961d1fd5685fd906a3267711 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 11 Jan 2018 23:44:11 -0800
Subject: [PATCH 2/3] Call out usage of props.children as render prop

---
 content/docs/render-props.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 18941f67..db3a8a8a 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -322,12 +322,13 @@ class WithTitleAsync extends React.Component {
   }
 
   render () {
+    const renderProp = this.props.children; // ⬅️
     if (this.state.error) {
       return <span>Title Not Found</span>;
     } else if (!this.state.title) {
       return <span>Getting Title...</span>
     } else {
-      return this.props.children(this.state.title);
+      return renderProp(this.state.title); // ⬅️
     }
   }
 };

From 3b908cdcbc59947072bc0c6104ac35e4d343c514 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 11 Jan 2018 23:56:33 -0800
Subject: [PATCH 3/3] SImplify function-as-child example

---
 content/docs/render-props.md | 40 ++++++++++++------------------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index db3a8a8a..980fa304 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -303,37 +303,23 @@ In cases where you cannot bind the instance method ahead of time in the construc
 Although the examples above use `render`, any prop can be used to implement the render prop pattern. For example, the component below passes a function as the `children` prop:
 
 ```js
-<WithTitleAsync url="/my/api/books/123">
-  { ({ title }) => <h1>{title}</h1> }
-</WithTitleAsync>
-
-class WithTitleAsync extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { title: null };
-  }
+<WithTitle url="/my/api/movies/123">
+  { ({ title }) => <h1>{ title }</h1> }
+</WithTitle>
+```
 
-  componentDidMount() {
-    fetch(this.props.url)
-      .then(
-        ({ title }) => { this.setState({ title }) },
-        (error) => { this.setState({ error }) }
-      )
-  }
+```js
+const WithTitle = (props) => {
+  // In a real app the url prop would be used to fetch the title from an API
+  // Here we hard-code an example title
+  const title = 'Babe: Pig in the City';
+  const renderProp = props.children;
 
-  render () {
-    const renderProp = this.props.children; // ⬅️
-    if (this.state.error) {
-      return <span>Title Not Found</span>;
-    } else if (!this.state.title) {
-      return <span>Getting Title...</span>
-    } else {
-      return renderProp(this.state.title); // ⬅️
-    }
-  }
+  return renderProp(title);
 };
 
-WithTitleAsync.propTypes = {
+WithTitle.propTypes = {
+  url: PropTypes.string.isRequired,
   children: PropTypes.func.isRequired,
 };
 ```