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
-
- { ({ title }) => {title}
}
-
-
-class WithTitleAsync extends React.Component {
- constructor(props) {
- super(props);
- this.state = { title: null };
- }
+
+ { ({ title }) => { title }
}
+
+```
- 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 Title Not Found;
- } else if (!this.state.title) {
- return Getting Title...
- } else {
- return renderProp(this.state.title); // ⬅️
- }
- }
+ return renderProp(title);
};
-WithTitleAsync.propTypes = {
+WithTitle.propTypes = {
+ url: PropTypes.string.isRequired,
children: PropTypes.func.isRequired,
};
```