A simple example showing a child component consuming the context provided by a parent with the useContext hook in a React application.

cart-summary-drawer-useContext-consumer.js

import React, { useContext } from 'react';
import { orderItems } from '../../../../services/orderService';
import CheckoutDrawerContext from '../../../../context/CheckoutDrawerContext';

export const CheckoutSummaryDetails = props => {
  const { summaryDetails, userInfo, items } = props;
  const checkoutDrawer = useContext(CheckoutDrawerContext);

  const placeOrder = async () => {
    const executionResponse = await orderItems(userInfo, items);
    if (executionResponse === 'successfully placed order') {
      checkoutDrawer.toggleCheckoutDrawer();
    }
  };

  return (
    <div className="cart-drawer__summary">
      <strong className="cart-drawer__header">Summary</strong>
      <div className="cart-drawer__summary-content">
        <div className="checkout-summary">
          <span>Final Checkout Summary</span> <span>{summaryDetails}</span>
        </div>
      </div>
      <button type="button" className="order-button" onClick={placeOrder}>
        Order Now
      </button>
    </div>
  );
};