JavaScript Request & Form Syntax Notes

General React, Axios, Express, and Mongoose Syntax Patterns

The examples use generic record names so the focus stays on remembering the syntax and flow.

Replace Record, record, records, label, category, and value depending on the actual project.

✓

Remember the syntax pattern first.
Change the generic names depending on the project.

Main Pattern

GET Retrieve / Display

POST Add / Create

PUT Update / Change

DELETE Remove / Delete

Quick Method Reminder

Syntax	Meaning
`axios.get()`	retrieve / display
`axios.post()`	add / create
`axios.put()`	update / change
`axios.delete()`	remove / delete

Clear Form Syntax

setLabel("");
setCategory("");
setValue("");

setEditingId(null);

Empty strings clear controlled inputs.

null can be used to leave edit mode.

Database Method Examples

Find

Record.find()

Create

const record = new Record({
  label: req.body.label
});

await record.save();

Update

Record.findByIdAndUpdate(
  req.params.id,
  req.body,
  { new: true }
);

Delete

Record.findByIdAndDelete(
  req.params.id
);

Request Value Examples

req.body.label
req.body.category
req.body.value

req.params.id

response.data

record._id

Arrow Function Examples

const functionName = async () => {

};

const functionName = async (id) => {

};

onClick={() => removeRecord(record._id)}

Dynamic URL Examples

`http://localhost:5000/records/${id}`

`http://localhost:5000/records/${editingId}`

Use backticks when inserting ${variable} into a string.

GET Syntax

Frontend

axios.get("http://localhost:5000/records")
  .then((response) => {

    setRecords(response.data);

  });

Backend

app.get("/records", async (req, res) => {

  const records =
    await Record.find();

  res.json(records);

});

SHOW

find() → GET → response.data → state → map()

POST Syntax

Backend

app.post("/records", async (req, res) => {

  const record = new Record({

    label: req.body.label,
    category: req.body.category,
    value: req.body.value

  });

  await record.save();

  res.json(record);

});

Frontend

const addRecord = async () => {

  await axios.post(
    "http://localhost:5000/records",
    {

      label: label,
      category: category,
      value: value

    }
  );

  const response =
    await axios.get(
      "http://localhost:5000/records"
    );

  setRecords(response.data);

  setLabel("");
  setCategory("");
  setValue("");

};

ADD

input → state → POST → req.body → new Model → save

PUT Syntax

Backend

app.put("/records/:id", async (req, res) => {

  const updatedRecord =
    await Record.findByIdAndUpdate(

      req.params.id,

      {

        label: req.body.label,
        category: req.body.category,
        value: req.body.value

      },

      { new: true }

    );

  res.json(updatedRecord);

});

Frontend

const saveChanges = async () => {

  await axios.put(
    `http://localhost:5000/records/${editingId}`,
    {

      label,
      category,
      value

    }
  );

  const response =
    await axios.get(
      "http://localhost:5000/records"
    );

  setRecords(response.data);

  setEditingId(null);

  setLabel("");
  setCategory("");
  setValue("");

};

Select Record

const selectRecord = (record) => {

  setEditingId(record._id);

  setLabel(record.label);
  setCategory(record.category);
  setValue(record.value);

};

DELETE Syntax

Backend

app.delete("/records/:id", async (req, res) => {

  await Record.findByIdAndDelete(
    req.params.id
  );

  res.json({
    message: "Record removed"
  });

});

Frontend

const removeRecord = async (id) => {

  await axios.delete(
    `http://localhost:5000/records/${id}`
  );

  const response =
    await axios.get(
      "http://localhost:5000/records"
    );

  setRecords(response.data);

};

useState Syntax

const [records, setRecords] = useState([]);

const [label, setLabel] = useState("");

const [category, setCategory] = useState("");

const [value, setValue] = useState("");

const [editingId, setEditingId] = useState(null);

useEffect Syntax

useEffect(() => {

  axios.get(
    "http://localhost:5000/records"
  )
  .then((response) => {

    setRecords(response.data);

  });

}, []);

Input Syntax

<input

  type="text"

  placeholder="label"

  value={label}

  onChange={(e) =>
    setLabel(e.target.value)
  }

/>


<input

  type="text"

  placeholder="category"

  value={category}

  onChange={(e) =>
    setCategory(e.target.value)
  }

/>

Display List Syntax

{records.map((record) => (

  <div key={record._id}>

    <p>{record.label}</p>

    <p>{record.category}</p>

    <p>{record.value}</p>

  </div>

))}

Remember:

MongoDB uses record._id, not record.id.

Button Syntax

Add

<button onClick={addRecord}>

  Add Record

</button>

Edit

<button
  onClick={() =>
    selectRecord(record)
  }
>

  Edit

</button>

Delete

<button
  onClick={() =>
    removeRecord(record._id)
  }
>

  Delete

</button>

Complete App.jsx

Guide only:

Replace Record, records, label, category, and value depending on the actual project.

import { useState, useEffect } from "react";
import axios from "axios";

function App() {

  const [records, setRecords] = useState([]);

  const [label, setLabel] = useState("");
  const [category, setCategory] = useState("");
  const [value, setValue] = useState("");

  const [editingId, setEditingId] = useState(null);


  useEffect(() => {

    axios
      .get("http://localhost:5000/records")

      .then((response) => {

        setRecords(response.data);

      });

  }, []);


  const addRecord = async () => {

    await axios.post(
      "http://localhost:5000/records",
      {

        label: label,
        category: category,
        value: value

      }
    );

    const response =
      await axios.get(
        "http://localhost:5000/records"
      );

    setRecords(response.data);

    setLabel("");
    setCategory("");
    setValue("");

  };


  const removeRecord = async (id) => {

    await axios.delete(
      `http://localhost:5000/records/${id}`
    );

    const response =
      await axios.get(
        "http://localhost:5000/records"
      );

    setRecords(response.data);

  };


  const selectRecord = (record) => {

    setEditingId(record._id);

    setLabel(record.label);
    setCategory(record.category);
    setValue(record.value);

  };


  const saveChanges = async () => {

    await axios.put(
      `http://localhost:5000/records/${editingId}`,
      {

        label,
        category,
        value

      }
    );

    const response =
      await axios.get(
        "http://localhost:5000/records"
      );

    setRecords(response.data);

    setEditingId(null);

    setLabel("");
    setCategory("");
    setValue("");

  };


  return (

    <div>

      <h1>
        Record Management
      </h1>


      <input
        type="text"
        placeholder="label"
        value={label}
        onChange={(e) =>
          setLabel(e.target.value)
        }
      />


      <input
        type="text"
        placeholder="category"
        value={category}
        onChange={(e) =>
          setCategory(e.target.value)
        }
      />


      <input
        type="text"
        placeholder="value"
        value={value}
        onChange={(e) =>
          setValue(e.target.value)
        }
      />


      <button
        onClick={
          editingId
            ? saveChanges
            : addRecord
        }
      >

        {
          editingId
            ? "Save Changes"
            : "Add Record"
        }

      </button>


      {
        records.map((record) => (

          <div key={record._id}>

            <p>
              {record.label}
            </p>

            <p>
              {record.category}
            </p>

            <p>
              {record.value}
            </p>


            <button
              onClick={() =>
                selectRecord(record)
              }
            >

              Edit

            </button>


            <button
              onClick={() =>
                removeRecord(record._id)
              }
            >

              Delete

            </button>

          </div>

        ))
      }

    </div>

  );

}

export default App;

MongoDB Tutorial

Guide only:

Change the model name, route, and fields depending on the project.

const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");

const Record = require("./models/Record");

require("dotenv").config();

const app = express();


app.use(cors());

app.use(express.json());


mongoose
  .connect(process.env.MONGO_URI)

  .then(() => {

    console.log(
      "Connected to MongoDB"
    );

  })

  .catch((error) => {

    console.log(
      "MongoDB Connection Error",
      error
    );

  });



app.get("/", (req, res) => {

  res.send(
    "Server is running"
  );

});



app.get("/records", async (req, res) => {

  const records =
    await Record.find();

  res.json(records);

});



app.post("/records", async (req, res) => {

  const record =
    new Record({

      label: req.body.label,

      category:
        req.body.category,

      value:
        req.body.value

    });

  await record.save();

  res.json(record);

});



app.put("/records/:id", async (req, res) => {

  const updatedRecord =
    await Record.findByIdAndUpdate(

      req.params.id,

      {

        label:
          req.body.label,

        category:
          req.body.category,

        value:
          req.body.value

      },

      {
        new: true
      }

    );

  res.json(
    updatedRecord
  );

});



app.delete("/records/:id", async (req, res) => {

  await Record.findByIdAndDelete(
    req.params.id
  );

  res.json({

    message:
      "Record removed"

  });

});



app.listen(5000, () => {

  console.log(
    "Server running on port 5000"
  );

});

Common Syntax Mistakes

Model Capitalization

✕ new record(...)

✓ new Record(...)

MongoDB ID

✕ record.id

✓ record._id

Delete Method

✕ findbyIdAndDelete()

✓ findByIdAndDelete()

Arrow Function

✕ const removeRecord = async (id) = {

✓ const removeRecord = async (id) => {

Template Literal

✕ 'http://localhost:5000/records/${id}'

✓ `http://localhost:5000/records/${id}`

CRUD Flow Reminder

ADD

input → state → POST → req.body → new Model → save

SHOW

find() → GET → response.data → state → map()

UPDATE

selected object → editingId → PUT → req.params.id → update method

DELETE

_id → DELETE → req.params.id → delete method