-1

I'm currently learning the MERN stack and I'm very new to React and Express. My current task is to use an API I previously created and update the JSON data using React.

I created a form component using ReactStrap and now I need POST that data to the JSON object array of my API.

I'm using FormData and so far I've been able to access and display the data correctly but I can't seem so figure out how to update or add any data. With my current code I keep on getting

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

I've tried troubleshooting for this error but none of the answers I find seem to be applicable and as I'm just starting out with Express and APIs I'm not exactly sure what to look for. Any assistance would be great.

**I'm including a lot of code because I might be overlooking a small detail and want to create a full picture.

My Form component

import React from "react";
import Form from "react-bootstrap/Form";
import Modal from "react-bootstrap/Modal";
import AppButton from "./Button";

const WebForm = ({
  show,
  setShow,
  formTitle,
  onSubmit,
  onChange,
  btnValue,
  projID,
  idVal,
  titleName,
  descriptionName,
  projURLName,
  titleVal,
  descriptionVal,
  projURLVal,
}) => {
  return (
    <div>
      <Modal
        show={show}
        onHide={() => setShow(false)}
        dialogClassName="modal-90w"
        aria-labelledby="example-custom-modal-styling-title"
      >
        <Modal.Dialog>
          <Modal.Header closeButton>
            <Modal.Title>{formTitle}</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <Form onSubmit={onSubmit}>
              <Form.Group className="mb-3">
                <Form.Label>Project Name</Form.Label>
                <Form.Control
                  type="number"
                  placeholder="Project ID"
                  id="projID"
                  name={projID}
                  defaultValue={idVal}
                  onChange={onChange}
                />
                <Form.Text className="text-muted">
                  Please use ALL CAPS for the Project Name.
                </Form.Text>
              </Form.Group>

              <Form.Group className="mb-3">
                <Form.Label>Project Name</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Project Name"
                  id="projTitle"
                  name={titleName}
                  defaultValue={titleVal}
                  onChange={onChange}
                />
                <Form.Text className="text-muted">
                  Please use ALL CAPS for the Project Name.
                </Form.Text>
              </Form.Group>

              <Form.Group className="mb-3">
                <Form.Label>Project Description</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter Description"
                  id="projDescription"
                  name={descriptionName}
                  defaultValue={descriptionVal}
                  onChange={onChange}
                />
              </Form.Group>
              <Form.Group className="mb-3">
                <Form.Label>Web Address</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Project Web-Address"
                  id="projURL"
                  name={projURLName}
                  defaultValue={projURLVal}
                  onChange={onChange}
                />
              </Form.Group>
              <AppButton value={btnValue} type="submit" />
            </Form>
          </Modal.Body>
        </Modal.Dialog>
      </Modal>
    </div>
  );
};

export default WebForm;

The main UI component

import React, { useState, useEffect, useRef } from "react";
import Carousel from "react-bootstrap/Carousel";
import AppButton from "./Button";
import DispCard from "./Card";
import WebForm from "./Form";

const ProjectGrid = () => {
  const [index, setIndex] = useState(0);
  const [showEdit, setShowEdit] = useState(false);
  const [showAdd, setShowAdd] = useState(false);
  const [project, setProject] = useState([{}]);
  const [formValue, setValue] = useState("");
  const form = useRef(null);
  console.log(project);
  console.log(form);

  const fetchProjects = async () => {
    const res = await fetch("/projects");
    res.json().then((res) => setProject(res));
  };

  useEffect(() => {
    fetchProjects();
  }, []);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  const handleChange = (e) => {
    setValue(e.target.value);
    console.log(formValue);
  };

  const submit = (e) => {
    e.preventDefault();

    const data = new FormData(form.current);
    console.log(project);
    console.log(data);
    fetch("/projects", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((json) => setProject(json.project));
    console.log(project);
    console.log(data);
  };

  return (
    <div>
      <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
        {project.map((item, index) => {
          return (
            <Carousel.Item key={index}>
              <DispCard
                onEdit={() => setShowEdit(true)}
                title={item.title}
                description={item.description}
                URL={item.URL}
              />
              <Carousel.Caption>
                <h3>{item.title}</h3>
                <p>
                  <br />
                  <br />
                </p>
              </Carousel.Caption>
            </Carousel.Item>
          );
        })}
      </Carousel>
      {project.map((item, index) => (
        <>
          {console.log(item.title)}
          <WebForm
            show={showEdit}
            setShow={setShowEdit}
            formTitle="Edit Project Details"
            titleName="item[][title]"
            descriptionName="item[][description]"
            projURLName="item[][URL]"
            titleVal={item.title}
            descriptionVal={item.description}
            projURLVal={item.URL}
            onChange={(e) => handleChange(e)}
            onSubmit={submit}
            btnValue="Done"
          />
          <WebForm
            show={showAdd}
            setShow={setShowAdd}
            formTitle="Add a New Project"
            titleName="project[title]"
            descriptionName="project[description]"
            projURLName="project[URL]"
            titleVal={project.title}
            descriptionVal={project.description}
            projURLVal={project.URL}
            onChange={(e) => handleChange(e)}
            onSubmit={submit}
            btnValue="Add"
          />
        </>
      ))}
      <AppButton onClick={() => setShowAdd(true)} value={"Add"} />
    </div>
  );
};

export default ProjectGrid;

The API

const express = require("express");
const app = express();
const fileHandler = require("fs");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get("/projects", (req, res) => {
  fileHandler.readFile("web_project.json", (err, data) => {
    if (err) res.send("File not found. First post to create file.");
    else res.send(`${data}`);
  });
});

app.post("/projects", (req, res) => {
  res.send();
  fileHandler.readFile("web_project.json", function (err, data) {
    if (err) res.send("File not found. First post to create file.");
    else {
      let json = JSON.parse(data);
      json.push({
        id: req.body.id,
        title: req.body.title,
        description: req.body.description,
        URL: req.body.URL,
      });

      console.log(JSON.stringify(json));

      fileHandler.writeFile("web_project.json", JSON.stringify(json), (err) => {
        if (err) throw err;
      });
    }
  });
});

app.put("/projects/:id", (req, res) => {
  const idParams = req.params.id;
  console.log(idParams);

  fileHandler.readFile("web_project.json", (err, data) => {
    if (err) res.send("File not found. First post to create file.");
    else {
      let project = JSON.parse(data);
      //console.log(project);

      for (let i = project.length - 1; i > -1; i--) {
        console.log(project[i].id);
        if (project[i].id === parseInt(idParams)) {
          project = req.body;
          console.log(req.body);
        }
      }

      console.log(JSON.stringify(project));

      fileHandler.writeFile(
        "web_project.json",
        JSON.stringify(project),
        (err) => {
          if (err) throw err;
          res.send(JSON.stringify(project));
        }
      );
    }
  });
});

app.delete("/projects/:id", (req, res) => {
  res.send(req.params.id);

  const idParams = req.params.id;
  console.log(idParams);

  fileHandler.readFile("web_project.json", (err, data) => {
    if (err) res.send("File not found. First post to create file.");
    else {
      let project = JSON.parse(data);
      console.log(project);

      for (let i = project.length - 1; i > -1; i--) {
        console.log(project[i].id);
        if (project[i].id === parseInt(idParams)) {
          project.splice(i, 1);
        }
      }

      console.log(JSON.stringify(project));

      fileHandler.writeFile(
        "web_project.json",
        JSON.stringify(project),
        (err) => {
          if (err) throw err;
        }
      );
    }
  });
});

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

//localhost:8080/api/web-projects?id=4&title=Online-store&description=johnny&URL=something

And finally the JSON file

[
  {
    "id": 1,
    "title": "React Game!",
    "description": "Tic tac toe game created using Create React app.",
    "URL": "https://protected-anchorage-65131.herokuapp.com/"
  },
  {
    "id": 3,
    "title": "Online Shop",
    "description": "Online store for a decor and design company.",
    "URL": "https://kondtoin.lsojdnf/kdkfsj"
  },
  {
    "id": 2,
    "title": "Online Portfolio",
    "description": "Online portfolio created with HTML, CSS and JavaScript.",
    "URL": "https://jc03ceige.github.io/JC_van_der_Merwe/"
  }
]

2 Answers 2

2

The problem is on React side. In the submit method you're doing const data = new FormData(form.current);. But the value of form.current will always be null since you're never using the ref that you defined with this line const form = useRef(null);

Instead of using a ref I think the following should work

  const submit = (e) => {
    e.preventDefault();

    // const data = new FormData(form.current); remove
    // The event contains the target that triggered the submit event
    const data = new FormData(e.target);
    console.log(project);
    console.log(data);
    fetch("/projects", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((json) => setProject(json.project));
    console.log(project);
    console.log(data);
  };
2
  • Thanks, but when I change it to this (also previously tried e.form.current) the JSON file updates with a blank object. I'm assuming that it is not reading the form input properly but I don't know why because this is supposed to be very straight forward. Mar 15, 2022 at 18:10
  • While this answer is mostly correct, I think the best approach would be to use forwardRef on the WebForm component so the ref in the ProjectGrid component can be set correctly to the actual form element.
    – James
    Mar 18, 2022 at 3:07
0

When you create an instance of FormData you need to append data to the formData object. Use this solution

const data = new FormData()
data.append("username", username)

// Go ahead and append all your variables

On your Nodejs server, if you're not sending a file along with your form, do not send form data content-type to the server. Use json instead

1
  • This didn't work either. I think the actual issue was with my post request in the server. I ended up rewriting all the code and wrote the post request with a single object in the body instead. Apr 12, 2022 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.