Looking to incorporate a raw JavaScript file into a React project

Question

Looking to incorporate a raw JavaScript file into a React project

I have successfully converted my HTML and CSS components to React, but I am facing some challenges with the JS part. I attempted to use react-helmet, but encountered an error:

Cannot read property 'addEventListener' of null

Here is my React.js file:

import React,{ Component }from 'react'
import { Helmet } from 'react-helmet'
import './ContactForm.css'

export default class ContactForm extends Component {
    

    render() {
        return (
            <>
                <section>
                    <div className="container">
                        <form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18c98a18c98848c80888dcf828e8c">[email protected]</a>" method="POST" id="my-form"&...
    </div>
</div>
</pre>
<p>Original HTML/CSS/JS code:</p>
<p><div>
<div>
<pre class="lang-js"><code>window.addEventListener("DOMContentLoaded", function () {
  // get the form elements defined in your form HTML above

  var form = document.getElementById("my-form");
  // var button = document.getElementById("my-form-button");
  var status = document.getElementById("status");

  // Success and Error functions for after the form is submitted

  function success() {
    form.reset();
    status.classList.add("success");
    status.innerHTML = "Thanks!";
  }

  function error() {
    status.classList.add("error");
    status.innerHTML = "Oops! There was a problem.";
  }

  // handle the form submission event

  form.addEventListener("submit", function (ev) {
    ev.preventDefault();
    var data = new FormData(form);
    ajax(form.method, form.action, ...

etc.

javascript html css reactjs import

Answer 1

Answer №1

React allows you to seamlessly integrate JavaScript code within its framework.

<script src="./main.js"></script>   //--> is how HTML imports a JS file

To ensure your JavaScript code works effectively with React, proper formatting is essential.

Here's an example using functional components and hooks:

import React, { useState } from "react";
import "./ContactForm.css";

export default function ContactForm() {
   const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    massage: ""
  });

  const updateFormData = (e) =>
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });

  const submitForm = (e) => {
    e.preventDefault();
    console.log(formData);
    fetch("https://formspree.io/mbjzbwaj", {
      method: "POST",
      body: JSON.stringify({ formData }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const { firstName, lastName, email, massage } = formData;

  return (
    <section>
      <div className="container">
        <form id="my-form" onSubmit={submitForm}>
          <div className="form-group">
            <label htmlFor="firstName"> First Name</label>
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={firstName}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              id="lastName"
              name="lastName"
              value={lastName}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              value={email}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="massage">Massage</label>
            <textarea
              name="massage"
              id="massage"
              cols="30"
              rows="10"
              value={massage}
              onChange={(e) => updateFormData(e)}
            ></textarea>
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
     </section>
  );
}

Demo : stackblitz

EDIT

To integrate Formspree with React, utilize a specific hook for simplicity. Detailed documentation can be found here.

Start by importing formspree:

npm i @formspree/react

ContactForm.js

import React from 'react';
import { useForm } from '@formspree/react';

export default function ContactForm() {
  const [state, handleSubmit] = useForm('######'); // hash id
  if (state.succeeded) {
    return <div>Sucess!</div>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="firstName"> First Name</label>
        <input type="text" id="firstName" name="firstName" />
      </div>

      <div className="form-group">
        <label htmlFor="lastName">Last Name</label>
        <input type="text" id="lastName" name="lastName" />
      </div>

      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" />
      </div>

      <div className="form-group">
        <label htmlFor="massage">Massage</label>
        <textarea name="massage" id="massage" cols="30" rows="10"></textarea>
      </div>
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}

The hash id required can be found in the "form details" under the "integration" tab. In your case, it was "...formspree.io/mbjzbwaj" (hash id)

Answer 2

React allows you to seamlessly integrate JavaScript code within its framework.

<script src="./main.js"></script>   //--> is how HTML imports a JS file

To ensure your JavaScript code works effectively with React, proper formatting is essential.

Here's an example using functional components and hooks:

import React, { useState } from "react";
import "./ContactForm.css";

export default function ContactForm() {
   const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    massage: ""
  });

  const updateFormData = (e) =>
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });

  const submitForm = (e) => {
    e.preventDefault();
    console.log(formData);
    fetch("https://formspree.io/mbjzbwaj", {
      method: "POST",
      body: JSON.stringify({ formData }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const { firstName, lastName, email, massage } = formData;

  return (
    <section>
      <div className="container">
        <form id="my-form" onSubmit={submitForm}>
          <div className="form-group">
            <label htmlFor="firstName"> First Name</label>
            <input
              type="text"
              id="firstName"
              name="firstName"
              value={firstName}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              id="lastName"
              name="lastName"
              value={lastName}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              value={email}
              onChange={(e) => updateFormData(e)}
            />
          </div>

          <div className="form-group">
            <label htmlFor="massage">Massage</label>
            <textarea
              name="massage"
              id="massage"
              cols="30"
              rows="10"
              value={massage}
              onChange={(e) => updateFormData(e)}
            ></textarea>
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
     </section>
  );
}

Demo : stackblitz

EDIT

To integrate Formspree with React, utilize a specific hook for simplicity. Detailed documentation can be found here.

Start by importing formspree:

npm i @formspree/react

ContactForm.js

import React from 'react';
import { useForm } from '@formspree/react';

export default function ContactForm() {
  const [state, handleSubmit] = useForm('######'); // hash id
  if (state.succeeded) {
    return <div>Sucess!</div>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="firstName"> First Name</label>
        <input type="text" id="firstName" name="firstName" />
      </div>

      <div className="form-group">
        <label htmlFor="lastName">Last Name</label>
        <input type="text" id="lastName" name="lastName" />
      </div>

      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" />
      </div>

      <div className="form-group">
        <label htmlFor="massage">Massage</label>
        <textarea name="massage" id="massage" cols="30" rows="10"></textarea>
      </div>
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}

The hash id required can be found in the "form details" under the "integration" tab. In your case, it was "...formspree.io/mbjzbwaj" (hash id)

Answer 3

Answer №2

When working with React, event handling and other functionalities are approached in a slightly different manner.

To link an event with a handler, you can use the following syntax:

<button onClick={handleClick}>CLICK</button>

In this example, onClick represents the event, while handleClick is the designated handler function.

Prior to your render function, you can define a handler like this:

const handleClick = () => {
  console.log("Clicked!");
  // perform necessary functionality... 
}

You also have the option to access the event by passing (e)

const handleClick = (e) => {
  e.preventDefault(); // prevent the default action
  console.log("Clicked!");
  // perform necessary functionality... 
}

If you're transitioning your code to React, it's recommended to test it out using this approach and referring to the official documentation.

Answer 4

When working with React, event handling and other functionalities are approached in a slightly different manner.

To link an event with a handler, you can use the following syntax:

<button onClick={handleClick}>CLICK</button>

In this example, onClick represents the event, while handleClick is the designated handler function.

Prior to your render function, you can define a handler like this:

const handleClick = () => {
  console.log("Clicked!");
  // perform necessary functionality... 
}

You also have the option to access the event by passing (e)

const handleClick = (e) => {
  e.preventDefault(); // prevent the default action
  console.log("Clicked!");
  // perform necessary functionality... 
}

If you're transitioning your code to React, it's recommended to test it out using this approach and referring to the official documentation.

Looking to incorporate a raw JavaScript file into a React project

Answer №1

Answer №2

Similar questions

Incorporating JQuery UI Resizable functionality into a Meteor project after creating an object

Removing non-integer values from elements within an array using JavaScript

Array Not Defined

Tips for adjusting the "active" navigation class across various pages using base.html

Getting all inline styles from an HTML string using JavaScript

Tips for Sending Information to the Current Page Using JQuery

What is the most stylish method for merging a removeCartItem function with an addCartItem function?

Tips for including a JSON file within the utils directory of a Node.js project

The form action seems to be unresponsive when utilized within a vue-bootstrap form

"Troubleshooting: Issue with AngularJS ng-repeat not functioning properly when using an

Error message: "localStorage not defined - Pairing Recoil with Next.js"

Using CSS alone, incorporate two images within a section in HTML5

Scroll the div until it reaches the top of the page, then make it fixed in place

A basic webpage created using ASP.NET featuring simple HTML text

Double MySQL Inserts happening with a single submission

Ensure that the dropdown <select> remains open even while filtering through options

Discovering the initial word of a string using jQuery

Creating a simple vertical layout with a fixed header and footer using basic HTML and CSS, allowing for easy stretching and customization

Ways to manage your javascript variables

Leveraging the useEffect hook to make multiple API calls in ReactJS