const { useState, useEffect } = React;

function App() {
  const [photos, setPhotos] = useState([]);
  fetch("https://dog.ceo/api/breeds/image/random")
    .then((response) => response.json())
    .then((data) => console.log(data));
  return (
    <div className="app">
      <h1>Doggie Speed Dating</h1>
      <h3>
        Press the arrow keys on your keyboard. Left to skip, Right to Adopt.
      </h3>
      <section>
        <div>
          <img className="DogPhotos"></img>
        </div>
        Your HTML Here!
      </section>
    </div>
  );
}

I am trying to make a page for a dog tinder app that refreshes every 10 seconds. However, this API is a little different than the ones I'm used to in the sense that it returns a message as the randomly generated URL instead of set Objects and I'm not sure what to put into the img src. I've tried data.message and response.message but both throw undefined (I'm assuming it as a scope issue).

​

My console log is throwing the data as expected and as for the refresh trigger for the useEffect, I'm going to use an eventlistener for keyboard presses so it'll refresh the URL if the user presses right or left.