import { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [imageUrl, setImageUrl] = useState('https://images.dog.ceo/breeds/hound-afghan/n02088094_1003.jpg');
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
axios.get('https://dog.ceo/api/breeds/image/random')
.then((response) => {
setImageUrl(response.data.message);
})
.catch((error) => {
setErrorMessage(<section>{error.response.data.message}</section>);
});
}, []);
return (
<div>
<h1>My Dog Log</h1>
{errorMessage}
<div>
<img src={imageUrl} alt="A random dog" />
</div>
</div>
);
}
import { useState } from 'react';
function App() {
const [imageUrl, setImageUrl] = useState('https://images.dog.ceo/breeds/hound-afghan/n02088094_1003.jpg');
return (
<div>
<h1>My Dog Log</h1>
<div>
<button onClick={() => { console.log("The button was clicked!"); }}>Get New Random Dog Image</button>
<img src={imageUrl} alt="A random dog" />
</div>
</div>
);
}