Provider Pattern

[weikee94]

App.js

import * as React from 'react';
import './style.css';
import Listings from './components/Listings';
import Input from './components/Input';
import { ListingsProvider } from './context/ListingsProvider';

export default function App() {
  return (
    <ListingsProvider>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          padding: '3em',
        }}
      >
        <Input />
        <Listings />
      </div>
    </ListingsProvider>
  );
}

Listing Provider

import React from 'react';
import useListings from '../hooks/useListings';

const ListingsContext = React.createContext(null);

export function useListingsContext() {
  return React.useContext(ListingsContext);
}

export function ListingsProvider(props) {
  const listings = useListings();

  if (!listings) return null;

  return (
    <ListingsContext.Provider value={listings}>
      {props.children}
    </ListingsContext.Provider>
  );
}

stackblitz