Create Random Picture WebApp in REACTJS

Preview in new tab

This code is a simple React component for loading and displaying a random picture from the Unsplash API. Here’s a breakdown of each part of the code:

1. Imports: React’s useEffect and useState hooks are imported, along with some CSS styling.
2. Constant Definitions:
   • KeyID: This is the API key for accessing the Unsplash API.
   • ENDPOINT_URL: This is the URL to fetch a random picture from Unsplash.
3. LoadPicture Component:
   • This functional component takes in a single prop loadImage and returns a div that contains an img element with the source set to loadImage. It’s simply responsible for displaying the image passed to it.
4. MyBtn Component:
   • Inside this component, a state variable url is defined to store the URL of the current image. useState initializes it with an empty string.
   • useEffect hook is used to call the URL function when the component mounts. This function is responsible for fetching a random image from the Unsplash API and updating the url state with the URL of the small version of the image.
   • The component returns two elements: the LoadPicture component, which is passed the current url, and a button element that, when clicked, will trigger the URL function to fetch a new image.
   • There is a console.log statement that logs the URL function definition itself, which might not be what was intended. It might be more useful to log the fetched URL or the image data.
5. App Component:
   • This is the main component of the application. It contains an h1 element displaying the title and the MyBtn component, which is passed a name prop to set the button’s text.

Overall, when loaded, this app would display a “Load Random Picture” button, and clicking this button would fetch a random image from Unsplash and display it on the page. The initial image would be loaded when the MyBtn component is mounted, thanks to the useEffect hook.

the full code appears below:

View Full Code on codesandbox

// Importing useEffect and useState hooks from React
import { useEffect, useState } from "react";
// Importing CSS styles
import "./styles.css";

// API key for Unsplash
const KeyID = `TgHS-g88Drmcp1a3MLxgTjq1CdfSiu7MfrHltjpfrFU`;
// Endpoint URL for fetching a random image from Unsplash
const ENDPOINT_URL = `https://api.unsplash.com/photos/random/?client_id=${KeyID}`;

// Component for loading and displaying an image
const LoadPicture = (props) => {
  return (
    <div className="container">
      {/* Image element with src set to the prop loadImage */}
      <img src={props.loadImage} alt="" />
    </div>
  );
};

// Button component for loading random images
const MyBtn = (props) => {
  // State variable for storing the URL of the current image
  const [url, setUrl] = useState("");

  // Function to fetch a random image from Unsplash
  const URL = () =>
    fetch(ENDPOINT_URL)
      .then((response) => response.json())
      .then((data) => setUrl(data.urls.small));

  // useEffect hook to call the URL function on component mount
  useEffect(() => {
    URL();
  }, []);

  // Logging the URL function (this might be better replaced with logging the fetched URL or data)
  console.log("Images", URL);

  return (
    <>
      {/* Loading the image using the LoadPicture component */}
      <LoadPicture loadImage={url} />
      {/* Button to trigger loading a new random image */}
      <button className="button" onClick={URL}>
        {props.name}
      </button>
    </>
  );
};

// Main App component
export default function App() {
  return (
    <div className="App">
      {/* Title */}
      <h1>LoadPictures</h1>
      {/* Button component for loading random pictures */}
      <MyBtn name={"Load Random Picture"} />
    </div>
  );
}