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. …

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 =…

Variables vs values, primitives, functions, objects, and classes are values — Sometimes the concept of a value is obvious like when dealing with numbers or strings. It is clear that numbers, strings, booleans are data and can be used as values. Sometimes it is not so easier to understand. For example objects, functions and classes are values in JavaScript. …

Quick start with list components — This article looks at how to manage a list of radio buttons vs a list of checkboxes with React Hooks. In both cases, we need the list of options to display on the screen. Below is such a list. const options = [ { id: 1, name: "Option1" }…