title: accessing the 'this' keyword in a react functional component
body: <p>I'm trying to understand how make a component that can remove itself from a array of components with functional components. Here is the sample code of what I'm trying to do:</p>
  <pre><code>const App = () =&gt; {
      &lt;ObjState&gt;
          &lt;ObjectCreator /&gt;
          &lt;ObjectList /&gt;
      &lt;/ObjState&gt;
  }
  
  const ObjContext = createContext();
  
  const ObjReducer = (state, { type, payload }) =&gt; {
      switch(type) {
          case Types.ADD_OBJ:
              return {
                  ...state,
                  objects: [...state.objects, payload]
              };
          case Types.REMOVE_OBJ:
              return {
                  ...state,
                  objects: state.objects.filter(obj =&gt; obj !== payload)
              };
          default:
              return state;
      }
  }
  
  const ObjState = ({ children }) =&gt; {
      const initialState = {
          objects: []
      }
  
      const [state, dispatch] = useReducer(ObjRecuder, initialState);
  
      const addObj = (obj) =&gt; {
          dispatch({
              type: Types.ADD_OBJ,
              payload: obj
          });
      }
  
      const removeObj = (obj) =&gt; {
          dispatch({
              type: Types.REMOVE_OBJ,
              payload: obj
          });
      }
  
      return (
          &lt;ObjContext.Provider value={{
              objects: state.objects,
              addObj,
              removeObj
          }}&gt;
              {children}
          &lt;/ObjContext.Provider&gt;
      );
  }
  
  const ObjCreator = () =&gt; {
    const { addObject } = useContext(ObjContext);
    const createObj =() =&gt; {
      const obj = (&lt;ObjectTypeA key={uuid()} /&gt;);
      addObject(obj);
    }
    return (&lt;button onClick={createObj}&gt;create an object!&lt;/button&gt;)
  }
  
  const ObjectList = () =&gt; {
    const { objects } = useContext(ObjContext)
    return (
      &lt;fragment&gt;
        {objects}
      &lt;/fragment&gt;
    )
  }
  
  const ObjectTypeA = ({ key }) =&gt; {
    const { removeObj } = useContext(ObjContext);
    const removeSelf = () =&gt; {
        removeObj(this);
    }
    return (
      &lt;button onClick={removeSelf}&gt;remove me!&lt;/button&gt;
    )
  }
  </code></pre>
  <p>The problem is you can't reference <code>this</code> in the final <code>Object</code> component.
  I have the unique key but I'm not sure how to pass it through correctly. I attempted to build a reducer action that took the <code>key</code> from the <code>Object</code> and removed it that way but <code>key</code> came back as <code>undefined</code> even though it is deconstructed out of the props and I'm using an arrow function to preserve it.</p>
  <p>I feel like I'm tackling this problem in the wrong way.</p>