In this article, we will create a simple form that takes one input, the user’s location, and changes the input box size so we don’t have any overflow.
In this article, we will create a simple form that takes one input, the user’s location, and changes the font size so we don’t have any overflow.
A pretty common theme in my articles is the proper way to use state and/or state hooks. Mutating state directly is a big no-no. If we mutate state without creating a new object, we can lose functionality and cause some strange behavior.
Looking to class things up with an analog clock? Well, you have come to the right place. In this article, we will look at one way to build a simple analog clock in React using functional components. As a bonus, we will also create a digital clock for those with varying degrees of dyscalculia.
Let’s start by building a functional component in a new file called Clock.js.
Who doesn’t love a nice live/instant search feature? They save the user the hassle of typing out the full query and they can be especially useful when trying to find something in a list that has already been populated.
In this article, we will set up a live search for our friends list so that the user can find a specific friend more easily.
Oftentimes, we want to alter what we show to the user based on a condition. Let’s say we want to change the content of a card when the user clicks a button. There are several ways to accomplish this, but in this example, we will be taking a look at the logical AND operator.
In an anchor tag, we use the rel attribute to define the relationship between the current document and a linked resource. When opening the linked resource in a new tab or window (target=”_blank”), we use the rel attribute with the values noopener and/or noreferrer. So, why is this important and why would we choose one over the other… or both?
There are lots of reasons you may want a component to re-render, but not nearly as many ways to accomplish this. React is pretty strict when it comes to triggering a re-render. I have touched on the reasons why mutating state directly is a big “no-no” in the React world, and this is a big part of it.
So, you want to save an altered image for later use. Let’s say you want to allow the user to upload a photo, crop it, and save that cropped image as their avatar. Here I am going to go over one solution that I have found for getting the altered image information from React to Rails and attaching that information to the user via ActiveStorage. I will not be covering how to upload a photo, crop it, or how to set up ActiveStorage. For that information, I recommend that you check out the links below.
If you are using class components in React, it is likely that you want access to state. There are ways to use state in functional components using hooks, but here we are going to take a closer look at the setState function in class components.