state-with-images.md

React State with Images

Overview

To create more engaging user experiences developers can add images their React applications. Images in a React app can be referenced from an image that exists on the internet via a URL. But that can be risky as the developer has no control over the reliability of the image. Instead, developers often add images to the file structure of a React application and import the image to a component where it is rendered to the browser in an image JSX tag.

Learning Objectives

• can create an assets directory in a React application
• can import an image to a React Component
• can reference an imported image in an img JSX tag

Vocabulary

• assets directory

Process

• cd into the react-challenges repository
• Create a new branch: images-initials1-initials2 (ex. images-aw-sp)
• Create a new React application with no spaces: yarn create react-app images-student1-student2 (ex. yarn create react-app images-austin-sarah)
• cd into the project
• Open the project in a text editor
• Create a directory in src called components
• Code!

Useful Commands

• $ yarn start
• control + c (stops the server)
• control + t (opens a new terminal tab)

Troubleshooting Tips

• Is your server running?
• Are your components exported?
• Inspect the page and look for errors in the console tab.
• Always look at the first error message in the list.

---

React State with Images

Storing images in a React application gives us more control over the functionality of the application. To keep the images organized it is convention to store all the images in a directory called the assets directory. The assets directory lives inside the src directory at the same level as App.js.

Flashcard Application

Here is an example that uses images to display randomized flashcards. We will start in App.js with a heading tag.

const App = () => {
  return (
    <>
      <h1>Multiplication Flash Cards</h1>
    </>
  );
};
export default App;

Adding Images

Next we will add the images to the application. To keep our application organized it is convention to create a new directory in the src directory called assets. The assets directory will hold all the images for our flashcards. Then we will import the images to App.js. Once the images are imported they can be stored in an array.

import flashcard1 from "./assets/flashcard1.png";
import flashcard2 from "./assets/flashcard2.png";
import flashcard3 from "./assets/flashcard3.png";
import flashcard4 from "./assets/flashcard4.png";
import flashcard5 from "./assets/flashcard5.png";

const App = () => {
  const flashcards = [
    flashcard1,
    flashcard2,
    flashcard3,
    flashcard4,
    flashcard5,
  ];

  return (
    <>
      <h1>Multiplication Flash Cards</h1>
    </>
  );
};

export default App;

Adding State Values

Now that the images are imported to App.js we can create the logic of the application. First we will add a state variable that will hold the flashcard actively being displayed to the user as well as the method that will update the flashcard as the user selects the next option. This will be achieved with the useState React hook. The state variable can be named currentCard. It is convention to use the same name but add the prefix set to the updater method. We can set the first flashcard image as the initial value of currentCard. To see the card displayed in the browser the currentCard value is passed to the src attribute of an img tag in JSX.

import { useState } from "react";

import flashcard1 from "./assets/flashcard1.png";
import flashcard2 from "./assets/flashcard2.png";
import flashcard3 from "./assets/flashcard3.png";
import flashcard4 from "./assets/flashcard4.png";
import flashcard5 from "./assets/flashcard5.png";

const App = () => {
  const flashcards = [
    flashcard1,
    flashcard2,
    flashcard3,
    flashcard4,
    flashcard5,
  ];

  const [currentCard, setCurrentCard] = useState(flashcard1);

  return (
    <>
      <h1>Multiplication Flash Cards</h1>
      <img src={currentCard} alt="flashcard" />
    </>
  );
};

export default App;

Updating State Values

The next step is creating the logic that will allow the user to click through different flashcards. We will create a method that will pull a random image from the array. This method can be name handleCardSelection to communicate its intent. The method will hold the code that creates a random number and uses that random number to select a flashcard from the array of images. The handleCardSelection method is now ready to be called. We can add a button in JSX with an onClick attribute that will trigger the handleCardSelection method.

import { useState } from "react";

import flashcard1 from "./assets/flashcard1.png";
import flashcard2 from "./assets/flashcard2.png";
import flashcard3 from "./assets/flashcard3.png";
import flashcard4 from "./assets/flashcard4.png";
import flashcard5 from "./assets/flashcard5.png";

const App = () => {
  const flashcards = [
    flashcard1,
    flashcard2,
    flashcard3,
    flashcard4,
    flashcard5,
  ];

  const [currentCard, setCurrentCard] = useState(flashcard1);

  const handleCardSelection = () => {
    const randomCard = Math.floor(Math.random() * flashcards.length);
    setCurrentCard(flashcards[randomCard]);
  };
  return (
    <>
      <h1>Multiplication Flash Cards</h1>
      <img src={currentCard} alt="flashcard" />
      <br />
      <button onClick={handleCardSelection}>New Card</button>
    </>
  );
};

export default App;

---

💡 Challenge: Light Bulb

• As a user, I can see a square box on the screen with a black border and a white background.
• As a user, I can see the word "off" inside the box.
• As a user, every time I click on the box the word toggles between the word "off" and the word "on."
• As a user, when I see the word "off" the background color of the box is white.
• As a user, when I see the word "on" the background color of the box is yellow.
• As a user, I can see many boxes on the page all acting independently of one another.
• As a user, instead of seeing a box I can see a picture of a light switch in the "off" position.
• As a user, when I click on the light switch it turns "on".
• As a user, when the light switch is "off" I see a white light bulb.
• As a user, when I turn the switch "on" I see a yellow light bulb.

🏔 Stretch

• As a user, I can start with no light bulbs or switches on the screen.
• As a user, I can see a button to add a light bulb and corresponding switch.
• As a user, I can see a button to remove a light bulb and corresponding switch.
• As a user, every time I click the add button, I can add an additional light bulb and corresponding switch that acts independently of the other light bulbs and corresponding switches.
• As a user, every time I click the remove button, I can remove the last light bulb and corresponding switch in the series.

🗂 Assets

• Switch On
• Switch Off
• Light On
• Light Off

---

Back to Syllabus