Missing message values

[dpinkus87]

I am using React Boot Strap and integrating the Form component into this Offcanvas modal. I set the names = to the template names, but I am not sure if the ref is working correctly. I am able to receive an email but the message values are blank:

import React, { useState, useEffect, useRef } from "react";
import { Button, Form } from "react-bootstrap";
import Offcanvas from "react-bootstrap/Offcanvas";
import "../../App.css";
import emailjs from "@emailjs/browser";

// Offmessage Canvas

const MessageOffcanvas = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const form = useRef();

  // React useState
  const [items, setItems] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [isEmailValid, setIsEmailValid] = useState(false);

  const messageValue = useRef();



  useEffect(() => {
    const storedItems = () => {
      setItems(JSON.parse(localStorage.getItem("items")));
    };
    window.addEventListener("storage", storedItems);
    return () => window.removeEventListener("storage", storedItems);
  }, []);

  const handleEmailChange = (event) => {
    event.preventDefault();
    const { value } = event.target;
    setEmail(value);
    setIsEmailValid(value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i));
  };
  
  const handleSubmit = (e) => {

    e.preventDefault();
  
    emailjs
      .sendForm(
        'service_xxxxxxx',
        'template_xxxxxxx',
        form.current,
        'xxxxxxxxxxxxxxx'
      )
      .then(
        (result) => {
           console.log(result.text);
         
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  const styles = {
    button: {
      position: "fixed",
      bottom: "20px",
      right: "30px",
      zIndex: "99",
      fontSize: "1.8rem",
    },
    offcanvas: {
      position: "fixed",
      bottom: "20px",
      top: "25rem",
      right: "30px",
      backgroundColor: "#d9d9d9",
      color: "black",
      border: "none",
      width: "auto",
    },
    formControl: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      height: "100%",
      width: "auto",
    },
  };

  return (
    <>
      <Button variant="light" style={styles.button} onClick={handleShow} data-testid="message-offcanvas">
        Contact Us
        <div
          className="rounded-circle bg-danger d-flex justify-content-center align-items-center"
          style={{
            color: "white",
            width: "2rem",
            height: "2rem",
            position: "absolute",
            top: 0,
            right: 0,
            transform: "translate(25%, -25%",
          }}
        ></div>
      </Button>

      <Offcanvas
        style={styles.offcanvas}
        show={show}
        onHide={handleClose}
        backdrop={false}
        scroll={true}
        placement="end"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Contact Us</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body >
          <Form style={styles.formControl} onSubmit={handleSubmit} ref={form}>
            <label>Name:</label>
            <input
              type="text"
              name="Name"
              onChange={(e) => setName(e.target.value)}
            />
            <br />
            <label>Email:</label>
            <input 
              type="email" 
              name="Email" 
              onChange={handleEmailChange} />
            <br />
            <label>Phone Number:</label>
            <input
              type="tel"
              name="Phone Number"
              onChange={(e) => setPhone(e.target.value)}
            />
            <br />
            <label>Products:</label>
            <ul 
              name="Products">
              {items.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
            {!isEmailValid && <p>Please enter a valid email address</p>}
            <button type="submit">Submit</button>
          </Form>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
};
export default MessageOffcanvas;

Here is my template:

Hi,

You got a new message from {{Name}}:

{{Email}}

{{Phone Number}}

{{Products}}

Thanks for any help in advance!

[xr0master]

I recommend looking at the Email History to see what kind of data you are sending.
You may also debug your application.

[dpinkus87]

Thanks @xr0master, I was able to get the name and email now. Do you know if there is a way to target the ul in the form - this is where product names are being added. Currently I have the form name="Products" and in the template {{Products}} - similar to the other fields, but I am not receiving any values. I appreciate the help!

[xr0master]

The ul component is not a form input. You can add the hidden input for this:

<input type="hidden" name="Products" value={items} />

[dpinkus87]

Thanks for all the help @xr0master!