beer-availability-context-3.jsx

/* providers/BeerProvider.jsx */
import React, {createContext, useState} from 'react';

export const BeerContext = createContext();

const BeerProvider = (props) => {
  const [isAvailable, setIsAvailable] = useState(true);
  
  const toggleAvailability = () => setIsAvailable(!isAvailable);
  
  const value = {
    actions: {setIsAvailable, toggleAvailability},
    values: {isAvailable}
  };

  return (
    <BeerContext.Provider {...props} value={value} />
  );
}

export default BeerProvider;


/* components/Beer.jsx */
import React, {useContext} from 'react';
import { BeerContext } from '../providers/BeerProvider';

const Beer = ({ isAvailable }) => {
  const {actions, values} = useContext(BeerContext);

  return (
    <>
      <div>
        I'm currently
        {values.isAvailable ? ' ' : ' not '}
        available for a beer
      </div>
      <button onClick={actions.toggleAvailability}>Change</button>
    </>
  );
}

export default Beer;