The pyramid of doom of the Render Prop react pattern

README.md

The pyramid of doom of the Render Prop react pattern

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

Foo.jsx

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>
            )
          }} />
        )} />
      )} />
    );
  }
}

The solution to prevent this is to use this, https://github.com/jmeas/react-composer