title: Issue using render props to create toggle button to show/hide child components
body: <p>Using below Original HTML I would like to show/hide a couple child components based on a toggle click. The issue I am having is the EditToggle link needs to show next to the h2 (inside "subtitle-container") but the two components need to render below (outside of "subtitle-container").</p>
  
  <p>When using the EditToggle on the Proposed Component I have to put the two components inside of the render function so they can see the editing value. This does not work since they now render inside of the "subtitle-container" div. How can I modify these components so I can use the EditToggle as a render prop but still have the two child components render outside of "subtitle-container" in the html?</p>
  
  <p>Optional notes: The original section HTML is duplicated many times on a larger parent component that is not shown. Given this this is one of the reasons why I  extracted the state controlling the toggle into its own component using render props. </p>
  
  <p>Also, the save in the EditComponent will return the ReadOnlyComponent but the inner workings of the Edit/Read are not shown here as they are not the concern.</p>
  
  <p>Thanks!</p>
  
  <p><em>Original HTML</em></p>
  
  <pre><code>&lt;div class="section" id="section-one"&gt;
    &lt;div class="subtitle-container"&gt;
      &lt;h2 class="subtitle"&gt;Title&lt;/h2&gt;
      &lt;a href=""&gt;Toggle&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ReadOnlyComponent --&gt;
    &lt;!-- EditComponent --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Proposed React Component</em></p>
  
  <pre><code>export class SectionComponent extends React.Component&lt;Props&gt; {
    render() {
      return (
        &lt;div class="section" id="section-one"&gt;
          &lt;div className="subtitle-container"&gt;
            &lt;h2 className="subtitle"&gt;Title&lt;/h2&gt;
              &lt;EditToggle
                render={(editing) =&gt; {
                return (
                  &lt;React.Fragment&gt;
                    {editing ? &lt;ReadOnlyComponent /&gt; : EditComponent }
                  &lt;/React.Fragment&gt;
                )
              }}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><em>Proposed toggle link component using render props</em></p>
  
  <pre><code>export class EditToggle extends React.Component&lt;Props&gt; {
    constructor(props) {
      super(props);
    }
  
    state = {
      editing: false,
    };
  
    onToggle = () =&gt; {
      this.setState({
          editing: !this.state.editing,
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;a onClick={this.onToggle}&gt;&lt;/a&gt;
          {this.props.render(this.state.editing)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>