import React, { createContext, useState, useContext } from "react";

const initialState = { currentlySelected: [] };

const AppContext = createContext(initialState);

const AppWrapper = ({ children }) => {
  const [currentlySelected, setCurrentlySelected] = useState([]);

  const doSetCurrentlySelected = selected => setCurrentlySelected(selected);

  return (
    <AppContext.Provider
      value={{
        currentlySelected,
        doSetCurrentlySelected
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

const MapComponent = props => {
  const { doSetCurrentlySelected } = useContext(AppContext);

  const handleClick = e => {
    e.preventDefault();
    // get values some how
    const values = ["thing1", "thing2"];

    doSetCurrentlySelected(values);
  };

  return (
    <div>
      <button onClick={handleClick}>click</button>
    </div>
  );
};

const OtherComponent = props => {
  const { currentlySelected } = useContext(AppContext);
  return <div>{JSON.stringify(currentlySelected)}</div>;
};

const App = props => {
  return (
    <AppWrapper>
      <MapComponent />
      <OtherComponent />
    </AppWrapper>
  );
};