title: Updating Parent Component State from Child Component with UseState React Hook
body: <p>Say I have a parent component like this:</p>
  
  <pre><code>function Recipe(recipe) {
    const [pageState, updatePageState] = useState("view");
  
    return (
      &lt;div className="border-b-2 border-gray-300 py-2"&gt;
        &lt;div className="h-full flex-col md:flex md:flex-row md:justify-between md:items-start"&gt;
          &lt;div
            className="order-2 flex flex-col flex-1 px-2 h-full md:h-72 lg:h-64 md:flex-col md:justify-between md:order-1 md:w-1/2 lg:w-3/4"
          &gt;          
            &lt;RecipeActions pageState = {pageState} triggerParentUpdate = {state =&gt; updatePageState(state)} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>and I have a child component below where I am trying to update <code>pageState</code> in the parent component. I've tried several iterations with no luck.</p>
  
  <pre><code>function RecipeActions(pageState, {triggerParentUpdate}){
    const [open, moreActions] = useState(false);
  
    function editRecipe(){
      triggerParentUpdate(pageState);
    }
  
    return(
      &lt;div className="flex"&gt;
      &lt;span className={`${pageState=='view' ? 'hidden' : ''} ml-1 sm:ml-2 md:ml-1 lg:ml-2 shadow-sm rounded-md`}&gt;
        &lt;button
          onClick={editRecipe}
          type="button"
          className="inline-flex items-center px-3 sm:px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
        &gt;
          &lt;svg className="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"&gt;
            &lt;path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /&gt;
            &lt;path
              fillRule="evenodd"
              d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              clipRule="evenodd"
            /&gt;
          &lt;/svg&gt;
          &lt;p className="hidden sm:block sm:pl-2 md:hidden lg:block"&gt;Edit&lt;/p&gt;
        &lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    )
  }
  </code></pre>