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, }; ```