Function component, cards map, and more — In this article, we will look at how to show a card from a deck using a React component. In the end, a card will look like this:

State hook, controlled input, and more — Wondering how to manage the state for a dropdown list with React Hooks? Let’s take a look. First, we need a list of values to render inside the dropdown element. Is that state? Let’s think about it. Do the drop-down options change? If they don’t then it's not state data…

Associated state, derived state, and more — In this short post, we will take a look at how to disable the submit button in a React form component until all inputs are valid. We will take the simple case where the inputs are valid if they are just filled. Consider a simple form with two fields. Because…

Passing refs to child forms, exposing onChange on form components, and more — In this article, I will look at three solutions for accessing the data from a child form component. A form component is simply a custom component that has the main task of rendering a form. Let’s first think about how we can access the data from a form element. The…

The this keyword, classes, function generators, and more — In this post, I will make a shortlist of the features I don’t use in JavaScript. Some developers will not be happy with what I took out but that’s fine. Let’s start. 1. this I was annoyed by the this keyword in JavaScript for a long time but I had to use…

onLoad, onErrror events, the after decorator, and more — In this post, I will aim to detect when several images are fully loaded inside a React function component. Be aware that simply rendering an image tag (<img />) does not mean that the image was loaded. The <img /> element has the onLoad event that allows us to detect…

Quick start with the Image constructor, promises, and more — In this article, I will aim to create a function retrieving an image from a given URL and detecting when this image is loaded. Instead of taking a callback then runs when the image has fully loaded the new function returns a promise. The then and catch method can be…

Group by, arrays, maps, reduce, and more — The SQL GROUP BY statement allows to create of groups of related data and then apply aggregate functions like SUM, MIN, or MAX. Consider the following LocationsReport table storing the number of the company locations per city. Country | City | No Italy | Rome…

Quick start with the array reduce method — Think of a list of movie objects. In its standard form, it may look something like this. const movies = [ {id: 1, name: 'The Dark Knight ', year: 2008}, {id: 2, name: ' Jokers', year: 2019} ]; Now consider the equivalent list of the inverted data. const invertedList =…