Codemzy's Blog

Hello! I am Codemzy and I love to code. JavaScript is my favourite flavour. I blog about coding, software and my projects.

How to build a select all checkbox with ReactJS

Here's how I build a simple select all checkbox with React using the `useState` hook and lifting the state up out of the checkbox component. Now we can check all and uncheck all too!

Written by Codemzy in ReactJS on August 21st, 2023

React checkbox onChange not firing/updating on the first click

If your React checkbox isn't working, or it takes two clicks to change the state, here are some common bugs and easy fixes!

Written by Codemzy in ReactJS on August 17th, 2023

How to check and uncheck a checkbox in React (controlled vs uncontrolled)

Checkboxes are pretty common form elements, and in this blog post, I'll show you the two ways to check and uncheck a checkbox in ReactJS.

Written by Codemzy in ReactJS on August 16th, 2023

How to update state when props change in React components

If you need to update your state when a prop changes, the easiest way to do this is React is with the `useEffect` hook. In this blog post, we will look at three options including `useEffect, the `key` prop, and removing state.

Written by Codemzy in ReactJS on August 14th, 2023

The "as" prop in ReactJS and dynamic component names

Ever wanted to use dynamic component names or use a variable to say which type of component or element you need? Let me introduce you to the `as` prop!

Written by Codemzy in ReactJS on August 8th, 2023

How to make a simple dropdown menu component in React

Dropdowns are a common UI element that your React app will (probably) need. Here's a simple ReactJS dropdown menu that you can use, with code examples and how I built it.

Written by Codemzy in ReactJS on August 7th, 2023

ReactJS useRef array for adding multiple elements

How can you `useRef` for multiple elements or inputs? What about adding new elements dynamically? Here's how you can create a `useRef` array or object for adding and removing multiple elements in your component.

Written by Codemzy in ReactJS on August 3rd, 2023

Adding a custom domain to DigitalOcean Spaces (without moving your DNS)

Adding a custom subdomain to DigitalOcean Spaces can be a little tricky. Especially if you don't want to move your DNS or manage custom certificates. Here are a couple of workarounds I use.

Written by Codemzy in Deploy on July 31st, 2023

6 ways to fix your code when you don’t know why it doesn’t work

One of the hardest parts of coding is when something just doesn’t work. And you don’t know why. In this blog post, I'll show you 6 ways to figure out why your code isn't working.

Written by Codemzy in JavaScript on July 27th, 2023

How to remount your ReactJS component on URL or prop change

You can force ReactJS to remount a component using the `key` prop, resetting state, values, and data. The `key` prop can help you remount components on route URL and prop changes, and here's how I use this magical prop!

Written by Codemzy in ReactJS on July 24th, 2023

How to compare MongoDB ObjectId() equality in Node.js

When you compare `ObjectId()`'s with the strict equality operator `===`, you might be surprised to get false, even when they match. It's caught me out a few times, so let's see how we can compare the MongoDB `ObjectId()`.

Written by Codemzy in Node.js on July 21st, 2023

How to shuffle an array into a random order with JavaScript

In this blog post, I shuffle an array of objects into a random order with two JavaScript methods, `Array.sort()` and a `shuffleArray` function. Check out the code and which performs best.

Written by Codemzy in JavaScript on July 20th, 2023

A simple rate limit function for Node.js using MongoDB

Here's how I set up a Node.js API rate limit in 59 lines of code using JavaScript and MongoDB. Each rate limit can be set with a custom time window and token count so you can decide the rules for your API calls.

Written by Codemzy in Node.js on July 12th, 2023

Why are my Express params undefined?! (and how to fix it)

Are your Express route params `undefined`? If you are not getting your route parameter values where you need them, this blog post should help you out of `undefined` hell with three easy fixes!

Written by Codemzy in Node.js on June 30th, 2023

Get and set query params with React Router (+ custom hook)

I created a custom hook to get and set query parameters in the URL query string using React Router and its location object. Here's how (and why) I built it, with all the code you need to use it.

Written by Codemzy in ReactJS on June 26th, 2023

An easy fix for "[object Object]" is not valid JSON

Getting "[object Object]" is not valid JSON error in your code is annoying, but there is often a simple fix. Maybe you don't need JSON.parse(), or maybe you're giving it the wrong data. Here's an easy fix (and how to troubleshoot if you're still stuck).

Written by Codemzy in JavaScript on June 20th, 2023

Joining arrays with JSX and React components

If you want to join React components together with JSX or another component - for example, in a list or breadcrumb - you might get [object Object] when using Array.join(). Here's what you can do instead.

Written by Codemzy in ReactJS on June 9th, 2023

Future-proof API versioning with Node.js & Express

Choosing the best way to add versioning to my Node.js API became quite an adventure! In this blog post, I looked at three approaches and (finally) picked my favourite.

Written by Codemzy in Node.js on June 2nd, 2023

Using Array join() on an object property

You can use Array.join() on an array of objects, but `join()` will only work with strings, so you need to get the property value(s) first. Let's look at some examples.

Written by Codemzy in JavaScript on May 30th, 2023

How to prevent an icon wrapping to a new line with JavaScript

In this blog post, I create a javascript function to separate the last word in a string, so I can keep it attached to an inline icon, to prevent the icon from wrapping to a new line on its own.

Written by Codemzy in JavaScript on May 25th, 2023

12
3
45

Categories