Let me know if you have a better way to code this kind of component
If you are not aware of Render Props pattern, start here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
Last active
April 28, 2021 17:20
-
-
Save iamdey/2793acee67fa0372e4aa0c5d39ce5d73 to your computer and use it in GitHub Desktop.
The pyramid of doom of the Render Prop react pattern
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react' | |
| import PropTypes from 'prop-types' | |
| // ... | |
| class Foo extends Component { | |
| createHandleSearchChange = (tags) => terms => | |
| this.setState({ foundTags: whateverFindAlgo(tags, terms)}) | |
| handleAddTag = (updateEntityTags, entity, tag) => { | |
| updateEntityTags(entity, [...entity.tags, tag]) | |
| } | |
| render() { | |
| return ( | |
| <WithTags render={(tags, isTagsFetching) => ( | |
| <WithEntity render={(entity) => ( | |
| <WithUpdateEntityTags render={(updateEntityTags) => { | |
| const handleAddTag = this.handleAddTag.bind(null, updateEntityTags, entity); | |
| return ( | |
| <div className="whatever"> | |
| <SearchTagInput | |
| onChange={this.createHandleSearchChange(tags)} | |
| isFetching={isTagsFetching} | |
| /> | |
| <SearchResults | |
| foundTags={this.state.foundTags} | |
| onAdd={handleAddTag} | |
| /> | |
| </div> | |
| ) | |
| }} /> | |
| )} /> | |
| )} /> | |
| ); | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The solution to prevent this is to use this, https://github.com/jmeas/react-composer