title: Put an object in state using React Hooks and Firebase
body: <p>I'm creating dogs list app using React Hooks and Firebase. There's a list of dogs, and this page will be a detail page of each dogs.</p>
  <p>So far I've successfully fetched an object from firebase database. Now I'm trying to put that object in state using setDog()</p>
  <pre><code>const [dog, setDog] = useState([{ name: '', breed: '' }]);
  
  useEffect(() =&gt; {
  
    const db = firebase.firestore();
    var docRef = db.collection(&quot;dogs&quot;).doc(id); // id is the one I click from dogs list
  
    docRef.get()
      .then(response =&gt; {
          const newDog = response.data();
          console.log(&quot;newDog&quot;, newDog); // Object {name: 'cookie', breed: 'beagle'}
          setDog(newDog); // &lt;- This doesn't work
      })
  
  }, [])
  </code></pre>
  <p>I can console.log the object, however setDog(newDog) doesn't work. How do I put the data in state?</p>