DEV Community: Anna Q. Harder

Hide/Show Password in React

Anna Q. Harder — Thu, 16 Feb 2023 23:02:23 +0000

When logging in or creating an account for a website or application, it is useful for a user to be able to see their password, especially when passwords are long and include different symbols. I implemented this show/hide password functionality in my React frontend capstone project at Flatiron School. There are many variations of this functionality such as a toggle button or icon change. I chose to use an eye and strikethrough eye icon for my website.

First, I installed the React Icons Kit library and imported the library and the two icons into my React component:



import {Icon} from 'react-icons-kit';
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

Next, I created three states. The first state was to manage and eventually set the password of a user, with an initial state of an empty string. The second state was for the type, which had an initial state of 'password'. This will be used in the controlled form to render the password on the page. The last state was for the icon, which had an initial state set as "eyeOff" icon because we want a user's password to be initially hidden:



const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

I then created a function that would handle the toggle between the hide password (eyeOff icon) and the show password (eye icon):



const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

This handleToggle function is saying: when the type is equal to 'password', have the icon set as eye open icon and show the password in text form, and when the type is anything else, have the icon set as the eyeOff icon and hid the password.

Now that the logic is made, we want to render the password and the toggle hid/show functionality on the page. Inside the return:



return (
     <div>
        <div>
           <div class="mb-4 flex">
              <input
                  type={type}
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  autoComplete="current-password"
             />
             <span class="flex justify-around items-center" onClick={handleToggle}>
                  <Icon class="absolute mr-10" icon={icon} size={25}/>
              </span>
            </div>
         </div>
      </div>
);

I used Tailwind CSS framework to style the position of the icon so that the icon is within the password input.

This is how the form looks with the eyeOff icon with password hidden:

And this is how the form looks with the eye icon with the password shown:

And that's it! I originally though this functionality would be very difficult but I was pleasantly surprised how easy this feature was to implement. I hope this was a helpful tutorial!

How to Make Star Rating in React

Anna Q. Harder — Thu, 16 Feb 2023 22:59:54 +0000

For my capstone project at Flatiron School, I created an application in which users can track and manage the eateries (ex: restaurants, cafes/bakeries/coffee shops, & bars/breweries) they have visited and the food and drink they ordered so visits can be referenced at a later time.

One of the features I wanted to include was a rating functionality. Instead of displaying just numerical ratings, I wanted to display those ratings via star icons. In addition to displaying those numerical ratings into stars, I wanted users to be able to click on the stars to create or edit their rating for an eatery.

I used a React frontend to accomplish this task. I will first describe how to display ratings via stars, and then describe how to dynamically change the star ratings when creating or editing a rating.

How to Convert Numerical Rating into Star Rating

Inside the component that holds and displays the eatery rating, I first declared a constant that holds the colors of the stars when they are empty and filled (this can alternatively be done via inline styling).



const colors = {
        orange: "#F2C265",
        grey: "a9a9a9"
    }

One of my attributes of an Eatery is the "rating" declared as an integer on the backend. This numerical, integer rating was then translated into stars in React. To create the stars, I first installed the React Icons Kit library and selected the FaStar icon, and imported it into my component. I then created an array of 5 stars, called "stars", where the .fill was 0.



const stars = Array(5).fill(0)

Now, in my return, this is where the star rating is displayed on the page. I mapped over the star array and returned the star icon where the color of the star is filled based on the rating of the specific eatery. For example, if a user gave the eatery 4 stars, 4/5 stars would be filled in with the color = orange, and 1/5 stars would remain the color = grey. (I also chose to display the numerical star rating next to the star icons.)



return (
  <div>
     {stars.map((_, index) => {
        return (
             <FaStar
                 key={index}
                 size={24}
                 color={(rating) > index ? colors.orange : colors.grey}
              />
      <p>({rating} Stars)</p>
         )
      })}
   </div>
);

How to Dynamically Create and Edit Star Icon Rating

Display a static rating via star icons is more simplistic than creating dynamically changing star icons. Dynamically creating or editing star icon ratings requires useState and event listeners. The same React icon was imported and the same color constant and star array described above were also created.

First, inside the component where I want to create (or edit) a star icon rating, I created two states. One for the rating attribute, with the initial state set as the current rating (if the user was editing the rating). The other state was created for selecting the stars when rating called "hoverValue". Initial state for the rating attribute was set as the current rating (if the user was editing the rating). Initial state was declared as undefined because we don't want to give the hoverValue a pre-determined state - we want it to be 0 before we start rating.



const [rating, setRating] = useState(eatery.rating)
const [hoverValue, setHoverValue] = useState(undefined)

When rating, I wanted to hover over the stars and have them be filled with the orange color before settling on the final rating. To do this, I added a some event listeners to handle this functionality:



const handleMouseOverStar = value => {
    setHoverValue(value)
};

const handleMouseLeaveStar = () => {
    setHoverValue(undefined)
}

The handleMouseOver takes in a value when the user hovers over the star icons and sets that value in the setHoverValue setter function. The handleMouseLeaveStar removes the stars when an user moves away from the stars (i.e. wants to reduce the amount of stars they have chosen).



const handleClickStar = value => {
    setRating(value)
};

The handleClickStar takes the value of the rating a user choses via a mouse click and sets that value to the setRating setter function. This means, the number of stars a user selects will be the rating of the eatery.

Now, we need to actually display this functionality on the page. In the return, we are going to map over the stars array (like before) and now include the event listeners.



return (
  <div>
     {stars.map((_, index) => {
          return (
               <FaStar
                   key={index}
                   size={24}
                   value={rating}
                   onChange={(e) => setRating(e.target.value)}
                   color={(hoverValue || rating) > index ? colors.orange : colors.grey}
                   onClick={() => handleClickStar(index + 1)}
                   onMouseOver={() => handleMouseOverStar(index + 1)}
                   onMouseLeave={() => handleMouseLeaveStar}
                />
           )
       })}
  </div>
);

The onChange event listener manages the setting of the rating, the onClick event listener manages the incrementation of the star icon rating, and the onMouseOver and onMouseLeave manage the hover effects of the star rating.

It is difficult to show the functionality of this hover star rating via images, but if you are curious how this works, you can play around with it on my website:

leftovers-2mnc.onrender.com

I think this functionality is a fun feature to add to any website that includes rating, and I hope this tutorial was helpful!

useHistory Hook in React for App Navigation

Anna Q. Harder — Mon, 09 Jan 2023 18:52:07 +0000

In my most recent project, my partner and I built a (faux) art auction site, Rotheby's. One of the features we wanted to implement was the ability of a user to click on the "Place Bid" button a specific piece of artwork, and for the user to be re-routed/directed to a new page displaying that individual piece of artwork and a form to place a bid. To implement this functionality, we called upon React's useHistory hook, and more specifically, the .push() method.

Auction Homepage with all artworks:

Re-directed page with individual artwork:

Background on React's History Object & useHistory Hook

The history package is a major dependency of ReactRouter that provides various implementations for managing session history. The useHistory hook accesses the ReactRouter history object and allows navigation to other routes using specific methods, such as .push() and .replace().

With the useHistory hook, a user can efficiently and seamlessly navigate to a specific URL, and move forward and back on different pages within an app. For my partner and my art auction application, we used the .push() method, which adds a new entry to the history stack. This provided us a way to programmatically control the browser's history and change the URL displayed in the address bar without reloading the page.

Implementation of useHistory and .push()

In the Artwork component (in our React app):

we imported the useHistory hook at the top of the component, which gave us access to the useHistory functionality
we declared the "history" variable to the useHistory hook
we defined the handleRedirect function which includes the history variable, the .push() method, and the route we want to navigate to. For this project we wanted to re-direct the user to the specific artwork page (each artwork in our database had an id value associated with it)
we assigned the handleRedirect function to the onClick event handler on the "Place Bid" button

import {useHistory } from "react-router-dom";

 const history = useHistory();

 function handleRedirect() {
   // redirect to /artworks/:id
   history.push(`/artworks/${id}`);
 }

return(
     <button className="bidButton" onClick={handleRedirect}>
            Place Bid
     </button>
);

Once the user clicks on the "Place Bid" button, they are re-directed to the URL with that specific artwork's id and the new page with the artwork's details and the form to bid on that piece of artwork.

** Note: the route (/artworks/:id) is associated with a route declared in a higher-level component (App.js) which routes to the ArtworkDetails component containing the code for the artwork's details and bidding form.

All Artwork URL:

Individual Artwork URL (the artwork selected has id=1):

Wrap Up

Learning about the useHistory hook and .push() methods were vital for my partner and I to successfully build the auction site we had imagined. I hope this blog post was helpful in providing a quick breakdown of the topic and associated example!

Happy Coding!

My partner for this project was:

Rachel HumesFollow

Software developer and avid salsa dancer, who is equally comfortable busting a move on the dance floor and building full stack scalable and efficient web applications.

How To Move Item Cards to a Favorites Page in React

Anna Q. Harder — Fri, 09 Dec 2022 19:48:20 +0000

A popular feature in basic web applications is the functionality of selecting a specific item from a larger group of items and moving the selected item to another page or list. For example, on a shoe store website, a user can select a pair of shoes from a list of shoes on the homepage, and add that pair of shoes to their cart.

This functionality was a main feature in the React web application I created for my second project in my software engineering bootcamp. I decided to write a "how to" blog post on how to build out this functionality.

A little background on my project: I wanted to build a web application/database that displayed and organized ski resorts in the United States and Canada. I specifically wanted to "favorite" a ski resort and see that "favorited" ski resort in my Favorites page. I also wanted to add functionality to remove that ski resort from the Favorites page by "unfavoriting" the resort.

db.json

I created my own db.json with the top 135 ski resorts in the US and Canada. There is a specific key:value pair in my ski resort object dedicated to "favorite". The value of the "favorite" key is defaulted to "false" meaning the ski resort is not a favorite of the user. This key:value pair is a boolean because I wanted the boolean to switch to true once the user "favorited" the ski resort. Furthermore, a boolean easily allowed me to insert conditional rendering later in my code.

Note: I wanted the favorite/unfavorite functionality to persist when the webpage reloads. Therefore, a boolean for the favorite/unfavorite feature was required in the database, as well as a PATCH request (discussed later) was needed to update the database.

React Components

I separated my React components as follows:

**Disclaimer:* It's best practice to avoid duplicative components in React, however, at the time of publishing this blog post, I hadn't yet refactored my code, so there are duplicative components.

The ResortCard component was the component I rendered in both the ResortList and Favorites components. This allowed me to "move" each individual Resort Card between the Resort List page and the Favorites page.

App Component

In the App component, I set state for all of the resorts via the useState hook and then used the useEffect hook for a GET request to fetch my data from my db.json. I then passed "resorts" down as a prop to both the ResortList and Favorites components.

Note: For now, ignore the lines 19-29 and the onFavoriteResort prop - this function will be discussed later!

ResortList Component

In the ResortList component, I mapped over the resort prop I sent down from the App component, and returned a ResortCard for each resort from the original array. Because each resort is an object, a key prop was added.

Favorite Component

In the Favorite Component, I filtered over each resort and returned the "favorite" key:value pair. I targeted this key:value pair because it holds the boolean of whether the user has favorited the specific resort. I then mapped over that array and returned the same ResortCard. Once again, a key prop was added.

ResortCard Component

In the ResortCard component, I first destructured the resort prop that was originally passed from the App component through the ResortList and Favorite components (line 6). I then added each prop to the card (line 26-51) so the resort data would populate the card.

Code for prop deconstruction and setting state:

Code for the rendered Resort Cards:

An example of the rendered Resort Cards to the webpage:

Once each card was made for each resort, I focused on the "favorite/unfavorite" functionality:

State was set for favorite element, and "favorite" key:value pair of the resort object was set in the useState hook because I want the boolean value to reflect the DOM's state.
I then set up my PATCH request within the handleFavoritedChange function, which first changed the favorite state of the resort to the opposite boolean value that was in the database (ex: in the database, the boolean is false, it would then be change to true) (line 13).
Then in line 19, the database was updated to reflect the state of the ResortCard. This PATCH request function was connected to an onClick event listener, so when the empty star icon was clicked/unclicked, the handleFavoriteChange function would run.
In line 22, the callback function "onFavoritedResort" was called. This callback function updates the DOM, so when the star icon is clicked to "favorite" a resort, that resort card is moved to the Favorite Page. And when a resort card is "unfavorited", the resort card leaves the Favorite Page.
handleFavoritedResort callback function was passed down through ResortList and Favorites components from the App Component (I promised this function would be important!) handleFavoriteResort function lives in the App component:
handleFavoriteResort function returns a new array which mapped over the original resort array. If the id of the favorited resort matches the resort id, then that resort is moved the updated array. The updated array (that contains the favorited resorts) is the parameter to the setResort setter function.

The full code for the ResortCard component:

Note:I added some conditional rendering via ternary operator to my onClick button (line 29-37), so the star icon would be filled in when the resort card was favorited, and an empty star would appear when a resort was unfavorited.

Final Product

The favorite/unfavorite functionality has now been built out! Here's how this functionality works:

All Resorts page with no resorts favorited:

All Resorts page with Alyseka Resort favorited (star is yellow):

Favorites page with Alyseka Resort populated:

When Alyseka Resort is unfavorited, the resort card is removed from the Favorites page, but still appears in the All Resorts page.

Conclusion

I started learning React 3 weeks ago, so the feeling of excitement and accomplishment when figuring out this functionality is the reason why I am so passionate about coding and software development. This functionality was one of the first major examples of being able to implement one of my ideas into a workable feature.

The favorite/unfavorite functionality can be used in many different scenarios, so I hope this tutorial was helpful!

As always, there are infinite ways to code, so I am sure there are many other ways to create this function. Please let me know if there are areas where I can improve my code!

Demystifying .innerText vs. .textContent

Anna Q. Harder — Thu, 17 Nov 2022 22:05:29 +0000

Learning JavaScript is a challenging feat. For me, one of the most mystifying parts of JavaScript was determining when to use innerText vs. textContent because both methods return the text contained within a DOM tree node. I was under the impression that innerText and textContent were interchangeable. However, this is not the case - rather, there are important differences between the two.

There are two objectives of this blog post:
1) Explain key differences between the innerText and textContent properties
2) demonstrate the occasions when each property should be called

.textContent

textContent returns the raw textual content inside the DOM node and its descendants, including script and style tags. textContent is aware of formatting such as spacing and line breaks.

🌟 TLDR: Use textContent when you want to see what's in the element including the relevant styling.

.innerText

innerText is aware of the rendered appearance of the text content of a node and its descendants. This means when using this property, innerText will only show human-readable elements (i.e., innerText will roughly return what you would get if you selected and copied the text on the page to the clipboard). Furthermore, innerText cannot access the contents of script or style tag elements.

🌟 TLDR: Use innerText when you only need to see what's in the element without the formatting.

Visual Explanation

I'm a visual learner, so I think the best way to understand the differences between innerText and textContent is through code examples.

Example #1
In the HTML code below, notice the indentation after the colon : and the "display: none" styling within the span element.

When using textContent, this method extracts the text from within the paragraph as it exists in the markup - the line break, indentation, and placeholder text are preserved.

On the other hand, when using innerText, the placeholder text is missing which means the "display: none" styling was taken into account, and there is no second line.

innerText returns what is rendered to the page, as it appears to the human eye.

Example #2
The use of innerText vs. textContent is also important when there is a multi-line string, such as a physical address.

In the code below, textContent is used to render the address to the DOM.

textContent renders the text in a single line:

Alternatively, seen in the code below, innerText is used to render the address to the DOM.

innerText preserves the multi-line formatting:

Conclusion

textContent and innerText methods have specific uses depending on what you want your code to accomplish. Keep in mind that innerText can introduce performance problems especially when used inside a loop or other iterative method, but these performance slowdowns are avoidable by using textContent.

There are a ton of other blog posts and videos also explaining the differences between innerText and textContent methods, but I hope this post provides an additional explanation between these two JavaScript methods.