DEV Community: Dave

Full-Stack React & Node.js - CRUD

Dave — Thu, 30 Jun 2022 18:39:10 +0000

Let's wrap things up.

In folder node-server edit note.model.js to:

const { prisma } = require("./db")

async function getNotes() {
  return prisma.note.findMany()
}

async function getNote(id) {
  return prisma.note.findUnique({ where: { id } })
}

async function createNote(
  note
) {
  return prisma.note.create({
    data: note
  })
}

async function updateNote(
  id, note
) {
  return prisma.note.update({
    data: note,
    where: {
      id
    }
  })
}

async function deleteNote(
  id
) {
  return prisma.note.delete({
    where: {
      id
    }
  })
}

module.exports = {
  getNotes,
  getNote,
  createNote,
  updateNote,
  deleteNote,
}

In folder node-server edit note.controller.js to:

const authorRepo = require('../models/author.model');
const noteRepo = require('../models/note.model');

async function getNotes(req, res) {
  const notes = await noteRepo.getNotes();

  res.json({
    notes
  });
}

async function getNote(req, res) {
  const {id} = req.params;
  const note = await noteRepo.getNote(id);
  const { authorId, ...noteRest } = note;
  const { username } = await authorRepo.getAuthor(authorId);

  res.json({ note: {
      ...noteRest,
      author: username
    }
  });
}

async function retrieveOrCreateAuthor(username) {
  let author = await authorRepo.getAuthorByName(username);
  if (author === null) {
    author = await authorRepo.createAuthor({
      username
    })
  }

  return author
}

async function postNote(req, res) {
  const {body} = req;
  const {title, content, author, lang, isLive, category} = body;

  try {
    const noteAuthor = await retrieveOrCreateAuthor(author);

    const note = await noteRepo.createNote({
      title,
      content,
      lang,
      isLive,
      category,
      authorId: noteAuthor.id
    })

    res
      .status(200)
      .json({
        note
      })
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Something went wrong"})
  }
}

async function putNote(req, res) {
  const {body} = req;
  const {id, title, content, author, lang, isLive, category} = body;

  try {
  const noteAuthor = await retrieveOrCreateAuthor(author);
  const note = await noteRepo.updateNote(id, {
    title,
    content,
    lang,
    isLive,
    category,
    authorId: noteAuthor.id
  })

  res
    .status(200)
    .json({
      note
    })
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Something went wrong"})
  }
}

async function deleteNote(req, res) {
  const {body} = req;
  const {id} = body;

  try {
    await noteRepo.deleteNote(id)

    res
      .status(200).send()
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Something went wrong"})
  }
}

module.exports = {
  getNotes,
  getNote,
  postNote,
  putNote,
  deleteNote,
}

In node-server edit routes/index.js to:

const express = require('express');
const noteRouter = express.Router();
const noteController = require('../controllers/note.controller');

noteRouter.get('/', noteController.getNotes);
noteRouter.get('/:id', noteController.getNote);
noteRouter.post('/', noteController.postNote);
noteRouter.put('/', noteController.putNote);
noteRouter.delete('/', noteController.deleteNote);

const routes = app => {
  app.use('/note', noteRouter);
};

module.exports = routes

Server side we now have all the operations we need for the basic CRUD operations.

Create, Read, Update, Delete

Try running the client and server now. If you click the submit button on the form you'll notice two problems: first the form doesn't respond, you could click over and over and not know if anything's happened. Second, if you look at the server console you'll notice an error.

Argument isLive: Got invalid value 'true' on prisma.createOneNote. Provided String, expected Boolean.

isLive is a boolean but is being sent to Prisma as a string.

In node-server index.js we are using:

app.use(bodyParser.json());

This does indeed retrieve the correct types during parsing, so the problem must be in the client. When we gather up the input control data in Form.js in the onSubmit handler we are using input.value which always returns a string.

Edit Form.js to:

import React, {useState} from 'react';
import InputLabel from "./InputLabel";
import {isEmptyString, isNullOrUndefined, titleFromName} from "./strings";
import './form.css'

const Form = ({entity, onSubmitHandler, onDeleteHandler}) => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <form onSubmit={e => {
      setIsSubmitting(true);
      const form = e.target;
      const newEntity = Object.values(form).reduce((obj, field) => {
        const {name} = field;

        if (!isEmptyString(name)) {
          switch (typeof entity[name]) {
            case "number":
              obj[name] = field.valueAsNumber;
              break;
            case "boolean":
              obj[name] = field.value === 'true';
              break;
            default:
              obj[name] = field.value
          }
        }

        return obj
    }, {})
      onSubmitHandler(newEntity);

      e.stopPropagation();
      e.preventDefault()
    }}>
      <fieldset
        disabled={isSubmitting}
      >
      {
        Object.entries(entity).map(([entityKey, entityValue]) => {
          if (entityKey === "id") {
            return <input
              type="hidden"
              name="id"
              key="id"
              value={entityValue}
            />
          } else {
            return <InputLabel
              id={entityKey}
              key={entityKey}
              label={titleFromName(entityKey)}
              type={
                typeof entityValue === "boolean"
                  ? "checkbox"
                  : "text"
              }
              value={entityValue}
            />
          }
        })
      }
      </fieldset>
      <button
        type="submit"
        disabled={isSubmitting}
      >
        {
          isSubmitting ? 'Submitting' : 'Submit'
        }
      </button>
      {
        onDeleteHandler && !isNullOrUndefined(entity.id) && <button
          disabled={isSubmitting}
          onClick={() => {
            setIsSubmitting(true);
            onDeleteHandler(entity.id)
          }}
        >
          Delete
        </button>
      }
    </form>
  );
};

export default Form;

Changes:

We wrap our input controls with a fieldset tag, allowing us to disable all controls when the user clicks "Submit"
We use a switch statement to parse the input value so it matches the type of the original entity we use to build the form.

If you try saving a form again you'll notice the bug is fixed.

Before we implement the rest of the CRUD operations a small refactor is needed. In react-client, create .env.development

REACT_APP_URL_API=http://localhost:4011/

Create useFetch.js:

import {useState, useEffect} from "react";

export const getUrl = url => new URL(url, process.env.REACT_APP_URL_API).toString();

function useFetch(url, skip) {
  const [data, setData] = useState({});

  useEffect( () => {
    const abortController = new AbortController();

    async function fetchData() {
      const fullUrl = getUrl(url);
      console.log('Fetching from: ' + fullUrl);
      try {
        const response = await fetch(fullUrl, {
          signal: abortController.signal,
        });

        if (response.ok) {
          console.log('Response received from server and is ok!')
          const res = await response.json();

          if (abortController.signal.aborted) {
            console.log('Abort detected, exiting!')
            return;
          }

          setData(res)
        }
      } catch(e) {
        console.log(e)
      }
    }

    !skip && fetchData()

    return () => {
      console.log('Aborting GET request.')
      abortController.abort();
    }
  }, [url, setData, skip])

  return data
}

export default useFetch

Currently our form can only add new notes, not edit. We need to do a few things:

List all notes
Edit a note
Add a note
Delete a note

Refactor AddEditNote.js to:

import React from 'react';
import {useParams, useNavigate} from "react-router-dom";
import RenderData from "./RenderData";
import Form from './Form';
import useFetch, {getUrl} from "./useFetch";
import {isNullOrUndefined} from "./strings";

const AddEditNote = () => {
  const {noteId} = useParams();
  const {note = {
    title: '',
    content: '',
    lang: '',
    isLive: false,
    category: '',
    author: '',
  }} = useFetch('note/' + noteId, isNullOrUndefined(noteId));
  const navigate = useNavigate();

  return (
    <div>
      <RenderData
        data={note}
      />
      <Form
        entity={note}
        onSubmitHandler={async newNote => {
          console.log({newNote})
          const response = await fetch(getUrl('note'), {
            method: isNullOrUndefined(newNote.id) ? 'POST' : 'PUT',
            body: JSON.stringify(newNote),
            headers: {
              'Content-Type': 'application/json'
            }
          });

          if (response.ok) {
            await response.json()
            navigate('/note-list')
          }
        }}
        onDeleteHandler={async (id) => {
          if (!isNullOrUndefined(id)) {
            await fetch(getUrl('note'), {
              method: 'DELETE',
              body: JSON.stringify({id}),
              headers: {
                'Content-Type': 'application/json'
              }
            });

            navigate('/note-list')
          }
        }}
      />
    </div>
  );
};

export default AddEditNote;

In react-client Create TableList.js

import React from 'react';
import {titleFromName} from './strings';
import './table-list.css';

const TableList = ({
                     data,
                     title,
                     onClickHandler,
                     idField = 'id',
                     fieldFormatter = {},
                   }) => {
  if (!data || data.length === 0) {
    return null
  }
  const firstRow = data[0];
  const dataColumnNamesToRender = Object.getOwnPropertyNames(firstRow)
    .filter(propName => propName !== idField);

  const headerRow = dataColumnNamesToRender.map((propName, i) => <th
    key={i}
  >
    {
      titleFromName(propName)
    }
  </th>);

  return (
    <table>
      <caption>
        {
          title
        }
      </caption>
      <thead>
      <tr>
        {
          headerRow
        }
      </tr>
      </thead>
      <tbody>
      {
        data.map((dataRow, i) => <tr
          key={i}
          onClick={() => onClickHandler && onClickHandler(dataRow[idField])}
        >
          {
            dataColumnNamesToRender.map((dataColumnName, i) => <td
              key={i}
            >
              {
                (fieldFormatter[dataColumnName] ?? (v => v))(dataRow[dataColumnName], dataRow)
              }
            </td>)
          }
        </tr>)
      }
      </tbody>
    </table>
  );
};

export default TableList;

In react-client Create table-list.css

table {
    margin: 12px;
    border-collapse: collapse;
}

th {
    color: white;
    padding: 8px;
    background-color: #444;
}

td {
    border-bottom: 1px solid #ddd;
    padding: 12px;
}

td a,
td a:visited {
    color: black;
}

td:not(:last-child) {
    border-left:1px solid #ccc;
    border-right: 1px solid #ccc;
}

tr:nth-child(even) {
    background-color: #f1f1f1;
}

Just like our generic Form component, this is a generic data list component.

In react-client Create NoteList.js

import React from 'react';
import TableList from "./TableList";
import {Link} from "react-router-dom";
import useFetch from "./useFetch";

const NoteList = () => {
  const {notes} = useFetch('note')

  return (
    <TableList
      data={notes}
      fieldFormatter={{
        title: (title, dataRow) => [
          <Link
            to={`/edit-note/${dataRow.id}`}
            key='1'
          >
            edit
          </Link>,
          <span key="2">
            &nbsp;{
              title
            }
          </span>
        ],
        dateCreated: date => new Date(date).toLocaleString()
      }}
    />
  );
};

export default NoteList;

This uses TableList.js to list out Notes.

Finally, change App.js to:

import {
  Link,
  HashRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import AddEditNote from "./AddEditNote";
import NoteList from "./NoteList";
import './App.css';

function App() {
  return (
      <div className="App">
        <Router>
          <Routes>
            <Route exact path="/" element={
              <ul>
                <li>
                  <Link to="/note-list">List Notes</Link>
                </li>
                <li>
                  <Link to="/edit-note">Create Note</Link>
                </li>
              </ul>
            }/>
            <Route path="/note-list" element={<NoteList/>}/>
            <Route path="/edit-note" element={<AddEditNote/>}/>
            <Route path="/edit-note/:noteId" element={<AddEditNote/>}/>
          </Routes>
        </Router>
      </div>
  );
}

export default App;

If you run this now, you have all basic CRUD operations working.

Congrats, full-stack.

This app is missing a few things: form validation and date handling, also dropdown lists; however, these should be easy things to add...

Code repo: Github Repository

Full-Stack React & Node.js - Database!

Dave — Wed, 29 Jun 2022 18:30:25 +0000

Let's jump right in!

All the edits we need to make are on the server. We're gonna use Prisma ORM and SqlLite DB for convenience. We need to install these in node-server

Install the Prisma client which express will use to connect to our database:

npm i -S @prisma/client

Next install Prisma, also on the server:

npm i -D prisma

-D is shorthand for --save-dev. This saves the package under devDependencies

Under node-server create a new folder prisma

In folder prisma, create a new file schema.prisma. Set the contents to:

datasource db {
  provider = "sqlite"
  url      = "file:./data.db?connection_limit=1"
}

generator client {
  provider = "prisma-client-js"
}

model Note {
  id        String @id @default(cuid())
  title     String
  content   String
  authorId  String
  lang      String
  isLive    Boolean
  category  String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  author    Author  @relation(fields: [authorId], references: [id], onDelete: Cascade, onUpdate: Cascade)
}

model Author {
  id        String @id @default(cuid())
  username  String @unique

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  notes    Note[]
}

We have two tables here:

Note
Author

To generate the SqlLite database file run this command from node-server folder:

npx prisma db push

Now to generate the DB entities run:

npx prisma generate

In node-server create a new folder: models. Inside node-server/models create 3 new files:

db.js
author.model.js
note.model.js

Edit db.js to:

const { PrismaClient } = require("@prisma/client")

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient()
} else {
  const {__db__} = global;

  if (__db__) {
    prisma = __db__
  } else {
    prisma = new PrismaClient({
      log: [
        {
          emit: "event",
          level: "query",
        },
        "info",
        "warn",
        "error",
      ],
    });

    prisma.$on("query", ({query, duration}) => {
      console.log(`\x1b[36mprisma:query\x1b[0m ${query}`);
      console.log(`Took: ${duration}ms`)
    });

    global.__db__ = prisma
  }

  prisma.$connect();
}

module.exports = {
  prisma
}

In development environments, this creates a single prisma instance and stores it as a global and logs SQL queries to the console.

Edit author.model.js to:

const { prisma } = require("./db")

async function getAuthor(id) {
  return prisma.author.findUnique({ where: { id } });
}

async function getAuthorByName(username) {
  return prisma.author.findUnique({ where: { username } });
}

async function createAuthor(
  author
) {
  return prisma.author.create({
    data: author
  });
}

module.exports = {
  getAuthor,
  getAuthorByName,
  createAuthor,
}

Edit note.model.js to:

const { prisma } = require("./db")

async function getNotes() {
  return prisma.note.findMany();
}

async function getNote(id) {
  return prisma.note.findUnique({ where: { id } });
}

async function createNote(
  note
) {
  return prisma.note.create({
    data: note
  });
}

async function updateNote(
  note
) {
  return prisma.note.update({
    data: note,
  });
}

module.exports = {
  getNotes,
  getNote,
  createNote,
  updateNote,
}

That finishes our data access layer. These ORM functions can now be used in our controllers to access data.

First we need to create a script to seed our database. In the prisma folder, create a new file seed.js:

const { PrismaClient } = require("@prisma/client")
const prisma = new PrismaClient();

async function seed() {
  // Blitz everything!
  await prisma.note.deleteMany();
  await prisma.author.deleteMany();

  const author = await prisma.author.create({
    data: {
      username: 'neohed'
    },
  });

  await prisma.note.create({
    data: {
      title: 'A New Note',
      content: 'This note is retrieved from the database!',
      authorId: author.id,
      lang: 'en',
      isLive: true,
      category: '',
    },
  });

  console.log(`Database has been seeded. 🌱`)
}

seed()
  .then(() => {
    console.log('Prisma seed function in prisma/seed.js executed!')
  })
  .catch((e) => {
    console.error(e);
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

Now we need to reference this script from package.json. Edit package.json to this:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.0.0",
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "prisma": "^4.0.0"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  }
}

Now run the seed script, execute this:

npx prisma db seed

This will run the seed.js script and populate the database with one author and one note record.

And finally, edit note.controller.js to:

const authorRepo = require('../models/author.model');
const noteRepo = require('../models/note.model');

async function getNote(req, res) {
  const notes = await noteRepo.getNotes();
  //HACK return top 1 note
  const { authorId, ...noteRest } = notes[0];
  const { username } = await authorRepo.getAuthor(authorId);

  res.json({ note: {
      ...noteRest,
      author: username
    }
  });
}

async function postNote(req, res) {
  const {body} = req;
  const {id, title, content, author, lang, isLive, category} = body;

  console.log('Server received data:');
  console.log({id, title, content, author, lang, isLive, category})

  res
    .status(200)
    .json({
      message: 'Ok'
    })
}

module.exports = {
  getNote,
  postNote
}

If you run your server and client now, you should see different data, loaded from the SqlLite database! You will also see the SQL queries logged in your server console.

Next we will finish up the form and add a few missing features...

Code repo: Github Repository

Full-Stack React & Node.js - HTTP POST

Dave — Tue, 28 Jun 2022 16:31:13 +0000

Now we're going to POST data to our server from the client.

Previously we've used HTTP GET requests which are for getting data. To add data we use HTTP POST.

First we need to make a few small changes to our node-server.

Edit note.controller.js to:

const note = {
  id: 1,
  title: 'A Note',
  content: 'Lorem ipsum dolor sit amet',
  author: 'neohed',
  lang: 'en',
  isLive: true,
  category: '',
}

async function getNote(req, res) {
  res.json({ note });
}

async function postNote(req, res) {
  const {body} = req;
  const {id, title, content, author, lang, isLive, category} = body;

  console.log('Server received data:');
  console.log({id, title, content, author, lang, isLive, category})

  res
    .status(200)
    .json({
      message: 'Ok'
    })
}

module.exports = {
  getNote,
  postNote
}

We've added a new function, postNote. As we don't yet have a DB we simply log out the data to prove we've received it.

Next, edit routes/index.js to:

const express = require('express');
const noteRouter = express.Router();
const noteController = require('../controllers/note.controller');

noteRouter.get('', noteController.getNote);
noteRouter.post('', noteController.postNote);

const routes = app => {
  app.use('/note', noteRouter);
};

module.exports = routes

Notice that we mounted our new controller method noteController.postNote to the same endpoint as getNote. Both are accessed from the same URL /note

This is RESTful architecture. It stands for REpresentational State Transfer. The key point is that the URL endpoint, or segment, we use represents the entity, and the HTTP verb, e.g., GET or POST, represents the action! The object entity is note so the URL endpoint is also note for all operations. To distinguish between different operations such as GET, POST and later DELETE, and others, we use the HTTP verbs which we send in our fetch request.

We use specific express router functions .get() and .post() and later .delete(), so that express knows, that when an HTTP GET request for the /note URL endpoint is received, it should be routed to .getNote and when an HTTP POST is received it should be routed to .postNote()

Following a RESTful architecture means your server API will be simple and clean. Using the combination of URL segments and HTTP verbs to architect the conversation between client and server allows for a simple and expressive representation.

Next we need to update our react-client

First a little bit of refactoring. Create a new file in react-client called strings.js and paste in this code:

const isNullOrUndefined = prop => prop === null
  || prop === undefined;
const isEmptyString = prop => isNullOrUndefined(prop)
  || prop === '';
const capitalize = word =>
  word.charAt(0).toUpperCase() +
  word.slice(1).toLowerCase();

function titleFromName(name) {
  if (isEmptyString(name)) {
    return '';
  }

  return name.split(/(?=[A-Z])|\s/).map(s => capitalize(s)).join(' ')
}

export {
  isNullOrUndefined,
  isEmptyString,
  capitalize,
  titleFromName,
}

Next, edit Form.js to:

import React from 'react';
import InputLabel from "./InputLabel";
import {isEmptyString, titleFromName} from "./strings";
import './form.css'

const Form = ({entity, onSubmitHandler}) => {
  return (
    <form onSubmit={e => {
      const form = e.target;
      const newEntity = Object.values(form).reduce((obj, field) => {
        if (!isEmptyString(field.name)) {
          obj[field.name] = field.value
        }

        return obj
      }, {})

      onSubmitHandler(newEntity);

      e.stopPropagation();
      e.preventDefault()
    }}>
      {
        Object.entries(entity).map(([entityKey, entityValue]) => {
          if (entityKey === "id") {
            return <input
              type="hidden"
              name="id"
              key="id"
              value={entityValue}
            />
          } else {
            return <InputLabel
              id={entityKey}
              key={entityKey}
              label={titleFromName(entityKey)}
              type={
                typeof entityValue === "boolean"
                  ? "checkbox"
                  : "text"
              }
              value={entityValue}
            />
          }
        })
      }
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  );
};

export default Form;

The main change, other than removing the string utility functions, is to add a form onSubmit event handler that grabs all form fields and adds the name & value pairs as properties and values in an object, then passes that object to an event handler parameter.

Next edit AddEditNote.js to implement this new onSubmitHandler parameter.

Paste this code into AddEditNote.js:

import React, {useState, useEffect} from 'react';
import RenderData from "./RenderData";
import Form from './Form';

const AddEditNote = () => {
  const [note, setNote] = useState({});

  useEffect( () => {
    const abortController = new AbortController();

    async function fetchData() {
      console.log('Calling fetch...')
      try {
        const response = await fetch('http://localhost:4011/note', {
          signal: abortController.signal,
        });

        if (response.ok) {
          console.log('Response received from server and is ok!')
          const {note} = await response.json();

          if (abortController.signal.aborted) {
            console.log('Abort detected, exiting!')
            return;
          }

          setNote(note)
        }
      } catch(e) {
        console.log(e)
      }
    }

    fetchData()

    return () => {
      console.log('Aborting GET request.')
      abortController.abort();
    }
  }, [])

  return (
    <div>
      <RenderData
        data={note}
      />
      <Form
        entity={note}
        onSubmitHandler={async newNote => {
          const response = await fetch('http://localhost:4011/note', {
            method: 'POST',
            body: JSON.stringify(newNote),
            headers: {
              'Content-Type': 'application/json'
            }
          });

          if (response.ok) {
            const res = await response.json()
            console.log(res)
          }
        }}
      />
    </div>
  );
};

export default AddEditNote

If you run this code, navigate to the form, edit the values then click submit and take a look at the server console, you should see the values you typed into the form have been posted back to the server and extracted from the HTTP message.

Next we will add a database...

Code repo: Github Repository

Full-Stack React & Node.js - Get client & server talking

Dave — Mon, 27 Jun 2022 22:21:21 +0000

Finally, the fun part is here! All our components are in place and now we only need to change 1 component to get the server and client talking.

In react-client, edit AddEditNote.js, and replace the contents with this:

import React, {useState, useEffect} from 'react';
import RenderData from "./RenderData";
import Form from './Form';

const AddEditNote = () => {
  const [note, setNote] = useState({});

  useEffect( () => {
    async function fetchData() {
      console.log('Calling fetch...')
      const response = await fetch('http://localhost:4011/note');

      if (response.ok) {
        console.log('Response received from server and is ok!')
        const {note} = await response.json();

        setNote(note)
      }
    }

    fetchData()
  }, [])

  return (
    <div>
      <RenderData
        data={note}
      />
      <Form
        entity={note}
      />
    </div>
  );
};

export default AddEditNote;

To test this you will need 2 shell/CLI programs.

Use one to run the server, in node-server folder, execute:

npm run start

The second in react-client folder, execute:

npm run start

Now, when your React site runs, and you click on "Edit Post" you will see a form with data that has been loaded from the server.

If you take a look at the shell/CLI where you ran your Node.js server you should see the requests logged by morgan.

There's a problem here though!

Each time we visit the form we see two GET requests on the server.

If you open the dev console in Chrome with F12 and go to the network tab you will also see duplicated requests here!

Pro tip: if your Chrome network tab doesn't show what you expect, make sure the correct category is selected. Look at the second row in the image above and you will see "Fetch/XHR" selected.

Let's check the Chrome console to see what we've logged out:

Sure enough, we call fetch twice, and receive a response twice. What is going on here?

This kind of thing is quite common, and in apps with a very complex structure of many nested components, you might see the same requests repeated 10, 12 or more times.

This is due to the way React will re-render components when either the props or the state changes. Which, of course is exactly what React is supposed to do. As developers we need to be careful when we fetch data inside, what is essentially, UI rendering code.

So, are we doomed? Do we just give up and go home?

To fix this we need to keep track of requests that have been made, and cancel them when the component unmounts, and ignore any responses that might sometimes return from cancelled requests.

Edit AddEditNote.js again, to this code:

import React, {useState, useEffect} from 'react';
import RenderData from "./RenderData";
import Form from './Form';

const AddEditNote = () => {
  const [note, setNote] = useState({});

  useEffect( () => {
    const abortController = new AbortController();

    async function fetchData() {
      console.log('Calling fetch...')
      try {
        const response = await fetch('http://localhost:4011/note', {
          signal: abortController.signal,
        });

        if (response.ok) {
          console.log('Response received from server and is ok!')
          const {note} = await response.json();

          if (abortController.signal.aborted) {
            console.log('Abort detected, exiting!')
            return;
          }

          setNote(note)
        }
      } catch(e) {
        console.log(e)
      }
    }

    fetchData()

    return () => {
      console.log('Aborting GET request.')
      abortController.abort();
    }
  }, [])

  return (
    <div>
      <RenderData
        data={note}
      />
      <Form
        entity={note}
      />
    </div>
  );
};

export default AddEditNote;

We use the AbortController as a signal passed as an option to the fetch request. When the component unmounts we abort any requests. And, just in case a request slipped through before being aborted, we check the abort state when a request returns.

This bug is common in production code bases. With each user action triggering multiple fetch requests causing the server to make multiple DB requests, your servers might end up with 10 times the load they should have.

If you save and run the code again, you will see that duplicate requests are cancelled and we only hit the server with a single GET request each time we visit the form. Good job - bug fixed!

In the next part, we will explore other HTTP verbs to make data mutations on the server...

Code repo: Github Repository

Full-Stack React & Node.js - Get data from server

Dave — Mon, 27 Jun 2022 19:37:41 +0000

Inside folder node-server, create a new folder called "controllers." Inside add a file called note.controller.js and add the following code:

const note = {
    id: 1,
    title: 'A Note',
    content: 'Lorem ipsum dolor sit amet',
    author: 'neohed',
    lang: 'en',
    isLive: true,
    category: '',
}

async function getNote(req, res) {
    res.json({ note });
}

module.exports = {
    getNote
}

Why .controller.js? In a complex app, you will have many entities and associated route, controller, middleware and data files. Tagging each file with .controller, .route, .middleware, .data, etc., makes it much less confusing when you have many files open in your editor.

Next, inside folder node-server, create another folder called "routes." Inside add a file called index.js and add the following code:

const express = require('express');
const noteRouter = express.Router();
const noteController = require('../controllers/note.controller');

noteRouter.get('', noteController.getNote);

const routes = app => {
  app.use('/note', noteRouter);
};

module.exports = routes;

Finally, change app.js to this:

const express = require('express');
const cors = require('cors');
const morganLogger = require('morgan');
const bodyParser = require('body-parser');
const initRoutes = require('./routes/index');

const env = process.env.NODE_ENV || 'development';
const app = express();

if (env === 'development') {
  app.use(cors());
}

app.use(morganLogger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

initRoutes(app);

app.use(function (req, res, next) {
  const error = 'Here be dragons. Route not found';
  console.info(`404 error! ${error}`)
  res.status(404).send(error);
});

const port = 4011;

app.listen({port}, async () => {
  const baseUrl = `http://localhost:${port}`;

  console.log(`Server running at: \t @ ${baseUrl}/`);
});

Now run your Node.js server with this command:

npm run start

When the console outputs a message saying the server is running, paste this URL into a browser: "http://localhost:4011/note" and you should see the following object displayed:

{
  note: {
    id: 1,
    title: "A Note",
    content: "Lorem ipsum dolor sit amet",
    author: "neohed",
    lang: "en",
    isLive: true,
    category: ""
  }
}

You now have a working client and server. Next, we will finally get the client and server to communicate...

Code repo: Github Repository

Full-Stack React & Node.js - Create the server

Dave — Mon, 27 Jun 2022 16:27:09 +0000

First create a folder node-server at the same level as folder react-client

Inside the node-server folder, use a shell/CLI to enter this command to create a package.json file:

npm init -y

The -y flag means that package.json will be filled with defaults. You can edit the file later to add your name and repository details, etc.

Next run this to install some dependencies:

npm i -S express body-parser cors morgan

i is shorthand for install
-S is shorthand for -save

Create index.js and paste in this code:

const express = require('express');
const cors = require('cors');
const morganLogger = require('morgan');
const bodyParser = require('body-parser');

const env = process.env.NODE_ENV || 'development';
const app = express();

if (env === 'development') {
  app.use(cors());
}

app.use(morganLogger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// 404 route not found!
app.use(function (req, res, next) {
  const error = 'Here be dragons. Route not found';
  console.info(`404 error! ${error}`)
  res.status(404).send(error);
});

const port = 4011;

app.listen({port}, async () => {
  const baseUrl = `http://localhost:${port}`;

  console.log(`Server running at: \t @ ${baseUrl}/`);
});

I will briefly explain the packages we are importing.

express is the web framework.

The cors package disables "cross origin resource sharing", where origin is a URL and resources are assets like images. The purpose of the cors policy is to prevent a website from pointing their image links to a different site and stealing hosting costs. In development we allow cors because we run both the React client and the Node server on one machine, each in their own process (live you could deploy both to the same folder and avoid cors issues). The port numbers on the server and client URL's are needed so the traffic (HTTP requests and responses) can be sent to the correct process. Port numbers are included in the browser decision on the origin of the server response

Your browser sees the website is on port 3000 but it attempts to fetch data from port 4011. Even though they both run on localhost, because the port numbers are different, to a browser they are different websites entirely! If we didn't disable cors, this request would violate the same-origin policy and be denied!

body-parser is middleware that parses incoming requests to extract data for us, in this case json (it also includes a few other parsers that can be useful).

morgan is a middleware request logger. In this case we pipe all messages to the console (you could instead write to a file). This is one of the most essential things to include in any node server. For troubleshooting and debugging, seeing all requests logged to your console is pure gold!

You might notice our server returns no data, has no routes defined, but has a 404 handler. I always add a 404 handler first! When your app grows and has complex routing, getting a clear message, a "final destination" for unmatched routes is essential for development and debugging.

Next edit package.json, and change the "scripts" section to add an additional line:

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Finally you should be able to run your Node.js server with this command:

npm run start

Run this in the same folder as the package.json file

When the console outputs a message saying the server is running, paste this URL into a browser: "http://localhost:4011/"

You should see a text message: "Here be dragons. Route not found"

This is good. We received an HTTP 404 error, which is what we expect as, currently, our server returns no data and has no routing paths defined.

You now have a working client and server. Next we will return some data.

Code repo: Github Repository

Full-Stack React & Node.js - Add a form

Dave — Mon, 27 Jun 2022 15:44:38 +0000

Add a form to the React client site

We're going to add a few components here to generate our form from our data. There are much better libraries to do this, which we will look at later, but for now we will write it ourselves.

Create all the following files under the src folder in our React project!

Create Input.js and paste in this code:

import React, { useEffect, useRef } from "react";

const Input = ({
id, value = "", type = "text", readOnly = false, required = false
}) => {
  const input = useRef(null);

  useEffect(() => {
    if (input.current) {
      const sValue = value.toString();

      if (type === 'checkbox') {
        input.current.checked = sValue === 'true';
        input.current.value = 'true'
      } else {
        input.current.value = sValue
      }
    }
  }, [type, value])

  return (
    <input
      ref={input}
      id={id}
      name={id}
      type={type}
      readOnly={readOnly}
      disabled={readOnly}
      required={required}
    />
  );
};

export default Input;

With useEffect and useRef hooks you can be certain that your uncontrolled inputs will update when the value prop changes.

Input.js creates text inputs or checkboxes depending on the data type of the value parameter. Next we need a component to render a label with an Input.js.

React has two kinds of inputs: controlled and uncontrolled. With controlled the value is managed by React in useState. With uncontrolled the value is managed by the DOM. The difference is what the "single source of truth" is. Controlled are ideal when you have a small number of inputs. Uncontrolled perform better and, when your controls are inside a form, it's easier to have a single form event handler rather than an event handler on each input.

Create InputLabel.js, like this:

import React from "react";
import Input from "./Input";

const InputLabel = ({label, error, info, ...inputProps}) => {
    return (
        <p
            className="input-label"
        >
            <label htmlFor={inputProps.id}>
                {
                    label
                }
            </label>
            <Input
                {...inputProps}
            />
        </p>
    );
};

export default InputLabel;

And now we make a form component with some string utility functions to turn an object into a bunch of form fields using our "Input" components.

Create Form.js:

import React from 'react';
import InputLabel from "./InputLabel";
import './form.css'

const isNullOrUndefined = prop => prop === null
    || prop === undefined;
const isEmptyString = prop => isNullOrUndefined(prop)
    || prop === '';
const capitalize = word =>
    word.charAt(0).toUpperCase() +
    word.slice(1).toLowerCase();

function titleFromName(name) {
    if (isEmptyString(name)) {
        return '';
    }

    return name.split(/(?=[A-Z])|\s/).map(s => capitalize(s)).join(' ')
}

const Form = ({entity}) => {
  return (
    <form>
      {
        Object.entries(entity).map(([entityKey, entityValue]) => {
          if (entityKey === "id") {
            return <input
              type="hidden"
              name="id"
              key="id"
              value={entityValue}
            />
          } else {
            return <InputLabel
              id={entityKey}
              key={entityKey}
              label={titleFromName(entityKey)}
              type={
                typeof entityValue === "boolean"
                  ? "checkbox"
                  : "text"
                }
                value={entityValue}
              />
            }
          })
        }
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  );
};

export default Form;

And create form.css:

form {
    padding: 1em;
    background: #f9f9f9;
    border: 1px solid #c1c1c1;
    margin: 2rem auto 0 auto;
    max-width: 600px;
}

form button[type=submit] {
    margin-left: 159px;
}

.input-label {
    display: flex;
}

.input-label label {
    font-weight: bold;
}

.input-label input {
    margin-left: 12px;
}

@media (min-width: 400px) {
    label {
        text-align: right;
        flex: 1;
    }

    input,
    button {
        flex: 3;
    }
}

Now change AddEditNote.js to use your Form.js component:

import React from 'react';
import Form from './Form';

const noteEntity = {
    id: 1,
    title: 'A Note',
    content: 'Lorem ipsum dolor sit amet',
    author: 'neohed',
    lang: 'en',
    isLive: true,
    category: '',
}

const AddEditNote = () => {
    return (
        <div>
            <Form
                entity={noteEntity}
            />
        </div>
    );
};

export default AddEditNote;

To test this, inside the node-react-stack/react-client folder, run:

npm run start

You should see an HTML form with the values from the noteEntity object.

Now, to make it easier to see what data our app is using we will make a "debug" component. Create a new file, RenderData.js, like this:

import React from 'react';
import './render-data.css'

const RenderData = ({data}) => {
    return (
        <div
            className='render-data'
        >
          <pre>
            {
                JSON.stringify(data, null, 3)
            }
          </pre>
        </div>
    );
};

export default RenderData;

Create render-data.css:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

.render-data > pre {
    font-family: 'Fira Code', monospace;
    font-size: 1.2em;
    padding: 8px 0 0 32px;
}

Fira Code is a nice monospace font provided by google. Monospace fonts are ideal for displaying code or data.

And finally, edit AddEditNote.js, like this:

import React from 'react';
import RenderData from "./RenderData";
import Form from './Form';

const noteEntity = {
    id: 1,
    title: 'A Note',
    content: 'Lorem ipsum dolor sit amet',
    author: 'neohed',
    lang: 'en',
    isLive: true,
    category: '',
}

const AddEditNote = () => {
    return (
        <div>
            <RenderData
                data={noteEntity}
            />
            <Form
                entity={noteEntity}
            />
        </div>
    );
};

export default AddEditNote;

If you run the React app now, you should see a screen like this:

You could just console.log the noteEntity object, but sometimes it's easier to understand things when you use a component like this to render the object in the browser window.

Next we will create the node.js server...

Code repo: Github Repository

Full-Stack React & Node.js - Create The Client

Dave — Mon, 27 Jun 2022 11:50:21 +0000

Create the React web-site

Create a folder somewhere for your project. This will hold the client and server code. I called mine: node-react-stack and will be using that folder name throughout.

Inside the node-react-stack folder, use a shell/CLI to enter this command to create your React app:

npx create-react-app react-client

When that has finished, inside the node-react-stack/react-client folder, run another command to npm install react-router:

npm i -S react-router-dom

Make sure that npm install commands like this are run in the same folder where your package.json file is located.

Next open up the react-client project in an editor.

Inside the src folder create a new file called AddEditNote.js and paste in this code:

import React from 'react';

const AddEditNote = () => {
    return (
        <div>
            Add Edit Note
        </div>
    );
};

export default AddEditNote;

Next edit App.js and change the code to:

import {
    Link,
    HashRouter as Router,
    Routes,
    Route,
} from 'react-router-dom';
import AddEditNote from "./AddEditNote";
import './App.css';

function App() {
    return (
        <div className="App">
            <Router>
                <Routes>
                    <Route exact path="/" element={
                        <ul>
                            <li>
                                <Link to="edit-note">Edit Note</Link>
                            </li>
                        </ul>
                    }/>
                    <Route path="/edit-note" element={<AddEditNote/>}/>
                </Routes>
            </Router>
        </div>
    );
}

export default App;

To test this, inside the node-react-stack/react-client folder, run:

npm run start

Just as with npm install above,

npm run

commands must be executed from the same folder as your package.json file. The reason is that

npm run start

runs the start script defined in your package.json file.

When your React app finishes building, a browser should appear, showing an "Edit Note" link. Clicking that will display the text: "Add Edit Note"

Good job - your client app and routing are working!

Next: Add a form

Code repo: Github Repository

Full-Stack React & Node.js - Introduction

Dave — Mon, 27 Jun 2022 11:50:04 +0000

An easy tutorial series that teaches full-stack with React, Node.js, Prisma and SqlLite DB

This series is simple and fast. The code repo link will be at the bottom of each post. To use this tutorial there's no typing. Instead, as you read, you only need to:

Create files and folders.
Paste in the code.
Run a few shell/CLI commands.

I will make 2 or 3 posts per day over the next few days until this is finished. If you have any problems, questions or suggestions then please add them.

You need:

node.js
npm
An editor

If you don't have node or npm, these links should help: Node.js, NPM

When you learn lock-picking you use training locks that expose the mechanism.

When I learned full-stack web development (back in the 90's) my biggest problem was understanding how all the pieces fitted together. I studied an app from an experienced developer, made changes - and it broke!

The problem: a lot was going on that I couldn't see. In this tutorial I will expose the "conversation" so you can see what's going on. Because, full-stack, is really just a conversation between the web-site and the server and between the server and the DB; they communicate and they each do their own thing.

I'm not going to explain in detail how the React code or CSS works. This is more about how the pieces fit together and communicate. I will explain in detail how the layers in the stack communicate and I will try to include some useful things I've learned, where relevant.

Next: Part 1, Create The Client

Code repo: Github Repository

Remix React with Uncontrolled Inputs

Dave — Tue, 17 May 2022 12:26:16 +0000

React Controlled Inputs

Like most React devs I use controlled inputs, where you supply a value and an onChange handler to each <input />.

<input
  id='name'
  value='Zelda'
  type='text'
  onChange={({target}) => changeHandler(target.value)}
/>

The alternative is to use un-controlled inputs, which I overlooked because, controlled inputs work just fine. Controlled inputs perform slightly less well (each key press causes all inputs to re-render), but you'd probably need 50 inputs before you even notice!

Then I started using Remix...

Remix

Remix embraces HTML forms.

<input /> tags inside forms don't need event handlers or fancy state management:

<form>
  <input id="name" type="text" />
  <button type="submit">
    Submit Form
  </button>
</form>

The HTML form posts the input values back to the server.

Server Postback, 100% Free!

Remix provides the Form component, from the @remix-run/react namespace, which builds on a standard HTML form to provide extra functionality, such as, automatically hooking up to a server side function:

import { Form } from "@remix-run/react";

export const action = async ({ request }) => {
  const formData = await request.formData();
  const name = formData.get("name");
  //TODO: Save to Database
}

export default function MyForm() {
  return (
    <Form method="post">
      <input id="name" type="text" />
      <button type="submit">
        Submit Form
      </button>
    </Form>
  )
}

It's not a meme, with Remix it really is that easy!

The input above is an un-controlled input.

This gives us a form for adding data, but what about edit? If you supply a value to those input elements, React will complain:

Warning: A component is changing an uncontrolled input of type text to be controlled.

You've probably seen this React error, when you supply an input with a value but no onChange handler!

Wrap our `input` elements in a component, so we can also handle edit...

To get the simplicity and performance of un-controlled inputs with the convenience of controlled ones you can use a ref.

import React, {useEffect, useRef} from 'react'

const UncontrolledInput = ({
   id,
   label,
   value = '',
   type = 'text',
   ...rest
}) => {
    const input = useRef();

    useEffect(() => {
        input.current.value = value
    }, [value])

    return (
        <p>
            <label>
                {
                    label
                }
                <input
                    ref={input}
                    id={id}
                    name={id}
                    type={type}
                    {...rest}
                />
            </label>
        </p>
    )
}

The input value is set with the useEffect and useRef hooks from React; and Remix provides Form to handle the server post-back:

<Form method="post">
  <UncontrolledInput
      id='name'
      label='Name'
      value={'Zelda'}
  />
</Form>

We can now set values in our input elements and post that back to the server without event handlers or state management. Next, we only need to load the data from the server.

Full Server Round Trip, also 100% Free!

Let's complete the picture with Remix:

import { Form, useLoaderData } from "@remix-run/react";

export const loader = async () => {
  //TODO: Load name from Database...
  return json({ name: 'Zelda' });
};

export const action = async ({ request }) => {
  const formData = await request.formData();
  const name = formData.get("name");
  //TODO: Save to Database
}

export default function MyForm() {
  const { name } = useLoaderData();

  return (
    <Form method="post">
      <UncontrolledInput
          id='name'
          label='Name'
          value={name}
      />
      <button type="submit">
        Submit Form
      </button>
    </Form>
  )
}

That's the easiest full-stack I've ever seen!

What about form validation?

Since we're "using the platform", remember "event bubbling"?

DOM events, like onChange, bubble up the DOM tree, hitting each parent node, until they reach the Body tag or an event handler cancels that event.

Event Bubbling in React

Here's a simple React component to demonstrate. The first button triggers both the button.onClick and the form.onClick. The second button only triggers its own onClick handler.

const MultiEventHandler = () => (
    <form
        onClick={() => console.log('Form click handler')}
    >
        <button
            onClick={() => console.log('Button click handler')}
        >
            Fire Both Event Handlers!
        </button>
        <button
            onClick={(e) => {
                console.log('Button click handler');

                e.stopPropagation()
            }}
        >
            Fire My Event Handler
        </button>
    </form>
)

Taken to an extreme, you could have single event handlers on the body tag, to handle all events, such as, onchange and onclick (don't try)

This Remix example uses a single onChange handler on the Form tag to handle all events for any nested input controls:

<Form method="post"
    onChange={(e) => {
        const {id, name, value} = e.target;

        // Perform validation here!

        e.stopPropagation()
    }}
>
    <UncontrolledInput
        id='name'
        label='Name'
        value={name}
    />
    <UncontrolledInput
        id='jobTitle'
        label='Job Title'
        value={jobTitle}
    />
    <button type="submit">
        Submit Form
    </button>
</Form>

The onChange event from each nested input bubbles up to the Form where it is "captured" by the event handler. By default, after running the code inside our event handler, the event would continue bubbling up the DOM tree, triggering any event handlers it encounters along the way, but we call stopPropagation() to prevent the event from bubbling up any further.

JavaScript Array Sort - In Depth (and some handy sort utilities)

Dave — Fri, 02 Oct 2020 17:20:48 +0000

This post describes JavaScript's array sort method with examples of arrays of values, arrays of objects and sorting an object by key.

Simple Examples

Array.prototype.sort() sorts an array in place (i.e., it mutates the original array).

To sort numbers:

const numbers = [4, 8, 2, 0]
numbers.sort()
console.log(numbers) // -> [0, 2, 4, 8]

To sort strings:

const strings = ['c', 'd', 'b', 'a']
strings.sort()
console.log(strings) // -> ["a", "b", "c", "d"]

To sort objects you need to use a custom sort function.

The equivalent sort function for the 2 examples above is:

function defaultSort(a, b) {
  if (a < b) {
    return -1 // A negative result moves `a` before `b` to a lower
              // array index.
  }

  if (b < a) {
    return 1 // A positive result moves `a` after `b` to a higher
             // array index.
  }

  return 0 // A zero result leaves 'a' and 'b' in the same order,
           // relative to each other
           // (other array items might get sorted above them)
}

To use this sort function:

const numbers = [4, 8, 2, 0]
numbers.sort(defaultSort)
console.log(numbers) // -> [0, 2, 4, 8]

With es6 you can simplify this sort function:

const numbers = [4, 8, 2, 0]
numbers.sort((a, b) => a - b)
console.log(numbers) // -> [0, 2, 4, 8]

Sorting an Array of Objects by Property

Here is the array of objects we will be working with:

const employees = [
    {
        name: 'Jane',
        salary: 20000,
        role: 'Programmer'
    },
    {
        name: 'Dave',
        salary: 25000,
        role: 'Programmer'
    },
    {
        name: 'Ben',
        salary: 10000,
        role: 'Programmer'
    },
    {
        name: 'Carol',
        salary: 50000,
        role: 'Manager'
    },
    {
        name: 'Bob',
        salary: 25000,
        role: 'Programmer'
    },
    {
        name: 'Alice',
        salary: 15000,
        role: 'Programmer'
    },
    {
        name: 'Carol',
        salary: 100000,
        role: 'CEO'
    },
    {
        name: 'Dave',
        salary: 20000,
        role: 'Programmer'
    }
]

You sort objects by property:

function sortByName({name: a}, {name: b}) {
  if (a < b) {
    return -1
  }

  if (b < a) {
    return 1
  }

  return 0
}

employees.sort(sortByName)

You can generalise this to work for any properties:

const sortByProp = (prop) => (a, b) => {
  if (a[prop] < b[prop]) {
    return -1
  }

  if (b[prop] < a[prop]) {
    return 1
  }

  return 0
}

It can be used like this:

const sortByName = sortByProp('name')

employees.sort(sortByName)

Sorting Objects by Multiple Properties

The trick is to apply subsequent sort criteria only when earlier sort criteria return '0', i.e., the previous sort criteria considered the items to be equal.

This can be done with a single sort function, but I find it much easier to use an order function to compose the sort functions:

const order = (...fns) => (...args) => {
    let res = 0, i = 0;
    while (
        fns[i] !== undefined &&
        (res = fns[i++](...args)) === 0
    );

    return res
}

const byName = sortByProp('name')
const bySalary = sortByProp('salary')
const byRole = sortByProp('role')

employees.sort(
  order(
    byName,
    bySalary,
    byRole,
  )
)

console.log(employees)

This code reads much easier and, if you wanted to change the order of the sort criteria, you simply swap the order of the functions:

employees.sort(
  order(
    byRole,
    bySalary,
    byName,
  )
)

An added benefit is it makes it much easier to write individual unit tests for each tiny sort function!

Sorting Objects by Key

Finally, to sort an object by keys you use the Object.entries and Object.fromEntries methods.

const fruits = {
  'oranges': {
    cost: .8,
    quantity: 3
  },
  'bananas': {
    cost: .75,
    quantity: 5
  },
  'apples': {
    cost: .5,
    quantity: 10
  }
}

const sorted = Object.fromEntries(
  Object.entries(
    fruits
  ).sort(([key]) => key)
)

console.log(sorted)

How does this work?

Object.entries(fruits) returns an array of arrays. Each sub array contains two elements: key and object:

[
  ["oranges", {
    cost: 0.8,
    quantity: 3
  }], ["bananas", {
    cost: 0.75,
    quantity: 5
  }], ["apples", {
    cost: 0.5,
    quantity: 10
  }]
]

.sort(([key]) => key) uses an es6 arrow function and destructuring to sort each array by the first element: key
Object.fromEntries converts the "array of arrays" back to an object.

DEV Community: Dave

Full-Stack React & Node.js - CRUD

Full-Stack React & Node.js - Database!

Full-Stack React & Node.js - HTTP POST

Full-Stack React & Node.js - Get client & server talking

Full-Stack React & Node.js - Get data from server

Full-Stack React & Node.js - Create the server

Full-Stack React & Node.js - Add a form

Add a form to the React client site

Full-Stack React & Node.js - Create The Client

Create the React web-site

Full-Stack React & Node.js - Introduction

An easy tutorial series that teaches full-stack with React, Node.js, Prisma and SqlLite DB

You need:

Remix React with Uncontrolled Inputs

React Controlled Inputs

Remix

Server Postback, 100% Free!

Wrap our input elements in a component, so we can also handle edit...

Full Server Round Trip, also 100% Free!

What about form validation?

Event Bubbling in React

JavaScript Array Sort - In Depth (and some handy sort utilities)

Simple Examples

Sorting an Array of Objects by Property

Sorting Objects by Multiple Properties

Sorting Objects by Key

Wrap our `input` elements in a component, so we can also handle edit...