Image for post
Image for post

To err is human, to create error handling middleware is divine. This article will explore how to catch and handle errors in Express using Mongoose and then display the errors to the end user using React.

All code used in this article is in this repo.

This diagram shows the modules we’ll discuss in the article. This app is using the MERN stack. The server is running through an Express app, and is connected to a MongoDB database. The frontend is a React app. These are the files we’ll be using for error validation:

Image for post
Image for post

Dynamically creating children and giving them each an event listener is common. These event listeners should be handled individually—for ex. if each child has a toggle, we only want to flip the toggle we clicked, not every toggle.

I had difficulties figuring out how to do this with hooks in React, so I decided to write this guide.

Set initial state within child components

We are often creating child components dynamically. In this case, I am importing objects from an API call that I will populate in React.

Each of my children is an note object that looks like this:

{
author: "Name",
title: "Sample note title",
content: "This is the note's content"…

Image for post
Image for post

This article will go over how to fetch data with Axios in React, save it to state, and then display it in a React component.

I route my data using an Express backend and store it in MongoDB, but this article won’t be about that. It assumes that you have a known endpoint and a datasource. The method described can be done with any API, but I am using an endpoint I created in Express, so my url will be my local host.

We will use two components here: a parent component to get the data, and then a child component to display the data. This page is going to be an overview page for notes that I have stored in my database. The notes will dynamically render in my React app with their own card that contains their title and content. …

Image for post
Image for post

Lifting state in React passes the state from a child component to its parent. The parent is the central controller for state. Once the state is stored in the parent, it can be passed to other child components, including the original child. In this article, we will explore passing it to a different child.

This is a very simple example to show why you may want to lift state up: You have a website that allows a user to click a brush icon to draw on a canvas. You have three components: App.js (the parent component), Brush.js (child), and Canvas.js …

About

JB

React guides I can't find on the Internet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store