Tunneling props through an intermediate component

after-search-layout.jsx

import React from 'react';

const SearchLayout = (props) => (
  <div>
    <h2>My Great Search</h2>
    {props.field}
    <hr />
    {props.results}
  </div>
);

export default SearchLayout;

after-search-query.jsx

import React from 'react';

export default class SearchQuery extends React.Component {
  state = {
    filter: '',
    term: '',
    results: []
  }

  actions = {
    setFilter: (filter) => {
      this.setState({ filter }, this.query);
    },

    clearFilter: () => {
      this.setState({ filter: '' }, this.query);
    },

    setTerm: (term) => {
      this.setState({ term }, this.query);
    }
  }

  query = async () => {
    const response = await fetch(`/api/stuff?filter=${this.state.filter}&term=${this.state.term}`);
    const results = await resopnse.json();
    this.setState({ results });
  }

  render() {
    return this.props.children({
      ...this.actions,
      filter: this.state.filter,
      results: this.state.results
    });
  }
}

after-search.jsx

import React from "react";
import SearchLayout from "./SearchLayout";
import SearchQuery from "./SearchQuery";
import SearchResults from "./SearchResults";
import SearchField from "./SearchField";

const Search = () => (
  <SearchQuery>
    {(query) => (
      <SearchLayout
        field={<SearchField query={query} />}
        results={<SearchResults query={query} />}
      />
    )}
  </SearchQuery>
);

export default Search;

before-search-layout.jsx

import React from 'react';
import SearchField from "./SearchField";
import SearchResults from "./SearchResults";

const SearchLayout = (props) => (
  <div>
    <h2>My Great Search</h2>
    <SearchField
      onTermUpdate={props.onTermUpdate}
      onFilterClear={props.onFilterClear}
      filter={props.filter}
    />
    <hr />
    <SearchResults
      onFilterUpdate={props.onFilterUpdate}
      results={props.results}
    />
  </div>
);

export default SearchLayout;

before-search.jsx

import React from "react";
import SearchLayout from "./SearchLayout";

export default class Search extends React.Component {
  state = {
    filter: '',
    term: '',
    results: []
  }

  render() {
    return (
      <SearchLayout
        onFilterClear={this.handleFilterClear}
        onFilterUpdate={this.handleFilterUpdate}
        onTermUpdate={this.handleTermUpdate}
        filter={this.state.filter}
        results={this.state.results}
      />
    );
  }

  handleFilterUpdate = (filter) => {
    this.setState({ filter }, this.query);
  }

  handleFilterClear = () => {
    this.setState({ filter: '' }, this.query);
  }

  handleTermUpdate = (term) => {
    this.setState({ term }, this.query);
  }

  query = async () => {
    const response = await fetch(`/stuff?filter=${this.state.filter}&term=${this.state.term}`);
    const results = await results.json();
    this.setState({ results });
  }
}

between-search.jsx

export default class Search extends React.Component {
  // initial state

  render() {
    <SearchLayout
      field={
        <SearchField
          onTermUpdate={this.handleTermUpdate}
          onFilterClear={this.handleFilterClear}
          filter={this.state.filter}
        />
      }
      results={
        <SearchResults
          onFilterUpdate={this.handleFilterUpdate}
          results={this.props.results}
        />
      }
    />
  }

  // callbacks & query method
}

tunneling-component.jsx

export function MyComponent(props) {
  <ChildComponent
    somethingMyComponentDoesntCareAbout={props.somethingMyOwningComponentGaveMe}
    onClick={props.seemsLikeACallback}
  />
}