Issues with React app

#1

I am trying to create React CRUD app.I am having issues in one of the components (ContactForm) .I keep getting an error " contact is not defined".
This is a link to my Github repo:

Any help would be appreciated.

import React, { useState, useContext, useEffect } from "react";
import ContactContext from "../context/contact/contactContext";

const ContactForm = () => {
  const contactContext = useContext(ContactContext);
  const { addContact, current, updateContact } = contactContext;

  useEffect(() => {
    if (current !== null) {
      setContact(current);
    } else {
      setContact({
        name: "",
        email: "",
        phone: "",
        type: "personal"
      });
    }
  }, [contactContext, current]);

  const [contact, setContact] = useState({
    name: "",
    email: "",
    phone: "",
    type: "personal"
  });

  const { name, email, phone, type } = contact;

  const onChange = e => {
    setContact({
      ...contact,
      [e.target.name]: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    if (current === null) {
      addContact(contact);
    } else {
      updateContact(contact);
    }

    setContact({
      name: "",
      email: "",
      phone: "",
      type: "personal"
    });
  };

  return (
    <div className="row">
      <form className="col s12" onSubmit={onSubmit}>
        <h2 className="indigo-text text-darken-4 center-align ">Add Contact</h2>

        <div className="row">
          <div className="input-field col s12">
            <input
              type="text"
              placeholder="Name"
              name="name"
              value={name}
              onChange={onChange}
            />
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12">
            <input
              type="email"
              placeholder="Email"
              name="email"
              value={email}
              onChange={onChange}
            />
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12">
            <input
              type="text"
              placeholder="Phone"
              name="phone"
              value={phone}
              onChange={onChange}
            />
          </div>
        </div>
        <h5>Contact type</h5>
        <label>
          <input
            type="radio"
            name="type"
            value="personal"
            onChange={onChange}
            checked={type === "personal"}
          />
          <span>Personal</span>
        </label>

        <label>
          <input
            type="radio"
            name="type"
            value="profesional"
            onChange={onChange}
            checked={type === "professional"}
          />
          <span>Profesional</span>
        </label>

        <div className="row">
          <div className="col s12">
            <button
              className="btn btn-block indigo darken-4"
              type="submit"
              name="action"
              value="submit"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  );
};

export default ContactForm;
#2

Have you tried declaring these seperately?
I think the brackets are the cause of the error.

#3

Try just checking that current is “Truthy” instead of only checking for null.

if (current) {
  setContact(current);
}
1 Like
#4

It worked! Thank you so much!

#5