So I want to do a simple image fetch from API. My goal is to display random image from API. Now it says "Data" is not defined. I have no idea why it does that because my console.logs were working before trying to show it on page.

This is my App.js

```
import React,{useEffect, useState} from 'react';
import Dog from './doggo';

//Main component
function App() {

  const [dogs, setDog] = useState();

  useEffect(() => {
      getDog();
  }, []);
  //Function to get data
  const getDog = async () => {
      //Fetch from url
      const response = await fetch("https://dog.ceo/api/breeds/image/random");
      //Store answer in data
      const data = await response.json();
      //Place data.message in setDog
      setDog(data.message);

      console.log(data.status);
      //data.message contains image url
      console.log(data.message);
  };
  return(
      <div>
          <h1>Press button to see your future dog!</h1>
          <button type="submit">See your dog!</button>
          <Dog
            image={data.message}
          />
      </div>
  );
};

export default App;

```