title: Passing a function with React Context API to child component nested deep in the tree
body: <p>I'm using React Context API for the first time. I have a table that generates a list of clients. Originally, I stored the clients in an array in state, and in the same page I had a function that sorted the clients based on click. </p>
  
  <p>I have moved the clients into context rather than in state of the actual page where the table is, but now of course my sort function no longer works. What I need to be able to do is use the same function, but organize the array that is in the context state instead.</p>
  
  <p>Original function: </p>
  
  <pre><code>onSortClient = column =&gt; e =&gt; {
          const direction = this.state.sort.column
              ? this.state.sort.direction === "asc"
                  ? "desc"
                  : "asc"
              : "desc";
          const sortedData = this.state.clients.sort((a, b) =&gt; {
              if (column === "client_name") {
                  const nameA = a.client_name.toUpperCase();
                  const nameB = b.client_name.toUpperCase();
                  if (nameA &lt; nameB) {
                      return -1;
                  }
                  if (nameA &gt; nameB) {
                      return 1;
                  }
  
                  return 0;
              }
              return 0;
          });
  
          if (direction === "desc") {
              sortedData.reverse();
          }
  
          this.setState({
              clients: sortedData,
              sort: {
                  column,
                  direction
              }
          });
      };
  </code></pre>
  
  <p>My context file:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  
  const Context = React.createContext();
  
  const Reducer = (state, action) =&gt; {
      switch (action.type) {
          case "DELETE_CLIENT":
              console.log(action.payload);
              return {
                  ...state,
                  clients: state.clients.filter(client =&gt; client.id !== action.payload)
              };
          case "ADD_CLIENT":
              return {
                  ...state,
                  clients: [action.payload, ...state.clients]
              };
          case "UPDATE_CLIENT":
              console.log(action.payload);
              return {
                  ...state,
                  clients: state.clients.map(
                      client =&gt;
                          client.id === action.payload.id ? (client = action.payload) : client
                  )
              };
  
          default:
              return state;
      }
  };
  
  export class Provider extends Component {
      state = {
          clients: [],
          loaded: false,
          dispatch: action =&gt; {
              this.setState(state =&gt; Reducer(state, action));
          }
      };
  
      async componentDidMount() {
          let localToken = localStorage.getItem("iod_tkn");
  
          const res = await axios({
              url: "/users/get_clients",
              method: "get",
              headers: {
                  Authorization: localToken
              }
          });
  
          this.setState({
              clients: res.data,
              loaded: true
          });
      }
  
  
      render() {
          return (
              &lt;Context.Provider onSortClient={this.onSortClient} value={this.state}&gt;
                  {this.props.children}
              &lt;/Context.Provider&gt;
          );
      }
  }
  
  export const Consumer = Context.Consumer;
  </code></pre>