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 scroll to an element after render in React (+ custom hook)

Here's how to scroll to an element after you render a component in React with `useRef` and `useEffect`. And if you need to do it more than once, I've included a custom `useScrollOnRender` hook you can use.

Written by Codemzy in ReactJS on September 29th, 2023

MongoDB findOneAndUpdate vs updateOne

There's more than one way to update a document in MongoDB. Here's when (and why) I use `findOneAndUpdate` instead of `updateOne` to update a document with MongoDB in Node.js.

Written by Codemzy in Node.js on September 26th, 2023

MongoDB findOneAndUpdate and how to know if it's an upsert

When you use the `upsert` option with `findOneAndUpdate` in MongoDB, it's not easy to know if the document was inserted or updated. Here's how I check if a document was created when returning the document before, or after the update.

Written by Codemzy in Node.js on September 25th, 2023

How to delete DigitalOcean Spaces files after X days with lifecycle rules

If you want to automatically have your files expire (and get deleted) from DigitalOcean Spaces after a certain number of days, you can do it with s3 lifecycle rules. You can’t set this up in the web interface, so here's the code you need to create the rule using Node.js.

Written by Codemzy in Node.js on September 22nd, 2023

Truthy vs falsy values in JavaScript

JavaScript converts values to true or false booleans in some contexts - like conditionals. A value that converts to true is a truthy, and one that converts to false is a falsy.

Written by Codemzy in JavaScript on September 21st, 2023

Parsing booleans in Express URL query parameters

When you send a query string `req.query` back to Express, true and false booleans are converted into strings. Here's why, and how I parse them back to booleans - but only sometimes!

Written by Codemzy in Node.js on September 20th, 2023

3 ways to pass a function as a prop in React

Here are three ways you can pass a function as a prop in React, with and without parameters - all while avoiding infinite loops!

Written by Codemzy in ReactJS on September 15th, 2023

Why does React render 0 with conditional `&&`?

In this blog post, I'll show you how to fix React rendering `0` in your `&&` conditions by using `!!` to convert it to a Boolean. But I'll also explain why it works so you can avoid this problem in the future!

Written by Codemzy in ReactJS on September 11th, 2023

React pagination component with all the code explained

Here's how I built a reusable pagination component with ReactJS, with next and previous buttons, that works with or without knowing the total number of pages available.

Written by Codemzy in ReactJS on September 1st, 2023

MongoDB pagination with skip, limit, and a next page trick

Paginating your data in MongoDB can be done in a single query, and it's kind of simple. But with this next page trick, you can know when you've fetched the last page of data, and avoid an empty results page.

Written by Codemzy in Node.js on August 29th, 2023

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

2 3 4 5