title: How do I pass all state variables inside react hooks to my child component
body: <p>I am trying to get all the states within the functional components using hooks. Equivalent to <code>...this.state</code>. I am avoiding passing the state individually to the <code>Context.Provider</code>.</p>
  
  <p>Since <code>this.state</code> is not available within the function. <code>state</code> is undefined.</p>
  
  <pre><code>import React, { useState, useEffect } from 'react'
  
  const RecipeContext = React.createContext()
  
  const RecipeProvider = (props) =&gt; {
    const [showHomeButton, setShowHomeButton] = useState(false)
    const [recipes, setRecipes] = useState([])
    const [loading, setLoading] = useState(true)
    const [search, setSearch] = useState('')
  
  
    const fetchRecipe = async () =&gt; {
      const recipeData = await fetch(`https://api.myjson.com/bins/t7szj`)
      const { recipes } = await recipeData.json()
      setRecipes(recipes)
      setLoading(false)
  
    }
    const handleSubmit = async (e) =&gt; {
      e.preventDefault()
      setLoading(true)
      url = `${url}&amp;q=${search}`
      fetchRecipe(url)
      setShowHomeButton(true)
  
    }
    const handleSearchChange = (e) =&gt; {
      setSearch(e.target.value)
    }
    const handleReturnHome = () =&gt; {
      fetchRecipe()
    }
    useEffect(() =&gt; {
      fetchRecipe()
  
    }, [])
    return (
      &lt;RecipeContext.Provider value={}&gt;
        {props.children}
      &lt;/RecipeContext.Provider&gt;
    )
  }
  const RecipeConsumer = RecipeContext.Consumer
  export { RecipeProvider, RecipeConsumer }
  </code></pre>
  
  <p>What's best way to pass all the states within the component to value in the provider.</p>
  
  <pre><code> &lt;RecipeContext.Provider value={}&gt;
        {props.children}
      &lt;/RecipeContext.Provider&gt;
  </code></pre>