POST requests via REACT, or My Horse Stepped in CRUD)

3 min readNov 6, 2022

At first, I praised React. Unlike vanilla JS, it was like riding a horse in the wind. But then we galloped into some CRUD. Create, Read, Update, Delete. Necessities for any interactive application. But in React, accomplishing these feats is like dribbling five balls at once, while balancing on a deck and roller:

In this entry to console.blog(), we will focus on the C of CRUD: Create, or more technically: POST.

The POST API method is useful for when a user INPUTS data into a form, which you want to POST to your backend API and display on the DOM.

There are four main things-to-do.

1. Handle ITEM ADD (parent)
2. Handle STATE CHANGES (child)
3. Handle SUBMIT BUTTON (child)
4. Display on DOM (child)

They do not necessarily need to be done in this order, but I find starting at the parent, then working downward to the DOM display helps me stay organized.

1. HANDLE ITEM ADD

▣ In the parent component (ex. function App()), make sure there is foundational state for the API objects.

const [items, setItems] = useState( [ ] );

▣ Write a function to take in arg with the ADDITION (newItem) to this API form! Use a spread operator.

function handleAddItem(newItem) {
   setItem([...items, newItem]);
  }

▣ Pass this function as a prop down to the child component that contains the FORM.

return (
    <ItemForm addItem={handleAddItem}/>
  )

2. HANDLE CHANGES

▣ In the child component with input form, create state. The initializer for state should be formatted like an empty entry in the API dataset we are adding a new entry to.

const [form, setForm] = useState({ 
    key: "",
    key: [],
    key: 0,
  })

▣ Write a handleChange function. This will allow us to CHANGE the form. It takes an arg, runs callback function to setForm which makes a copy via spread operator. Next, it targets the input form to create an object from whatever is typed in by user.

function handleChange(event) {
    setForm({
        . . .form,
       [event.target.name]: event.target.value,
    });
  }

3. HANDLE SUBMIT

▣ Write a handleSubmit function. This is for the onSubmit button which will active the posting, after the form is submitted.

function handleSubmit(event) {
   event.preventDefault();   const newItem = {
      key: value.location,
      key: value.location,
      key: { 
         value.location,
         }
      }   fetch("http://localhost:3001/toys", {
      method: "POST",
      headers: {
         "Content-Type": "application/json",
      },
      body: JSON.stringify(newItem),
   })
   .then((r) => r.json())
   .then(addItem);}

▫ First we create a variable that rebuilds the item entry as it is structured in the database.

Get MKDO’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

▫ Above we fetched the database with a typical POST method.

▫ In the body we used JSON.stringify to convert the data to JSON.

▫ In curly braces, we called the newItem that we just built.

4. Display on DOM

▣ To display the new item on the DOM, go to the JSX in the same child component as the submit form.

▣ Use the onSubmit event to run the function handleSubmit.

▣ Use the onChange event to run the function handleChange.

▣ Add a value property to the form which corresponds to the state object, whatever it may be (in the example below the input field is for an item’s name).

<form onSubmit={handleSubmit}>
   <input
      type="text"
      name="name"
      placeholder="Enter an item's name..."
      className="input-text"      onChange={handleChange}
      value={form.name}
   />
</form>