I have developed a project with context crud. Everything is fine, only the select option does not work, that is, after any option is selected and added, the selected option does not appear in the edit section. What is the problem ? I have error this : 'Cannot read properties of undefined (reading 'name')'

import React, { useState } from "react";
import { useContext } from "react";
import { GlobalContext } from "../../context/GlobalState";
import { useNavigate } from "react-router-dom";
import { NavLink } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import styles from "../ContactForm/Form.module.scss";
import { toast } from "react-toastify";
import { Checkbox, Button, Form, Input, Select, Radio } from "antd";

const Form1 = () => {
  const { ADD_CONTACT } = useContext(GlobalContext);
  const [contact, setContact] = useState({
    id: uuidv4(),
    name: "",
    surname: "",
    fatherName: "",
    specialty: "",
    email: "",
    gender: "",
    updatesNotification: "",
    test: "",
  });

  const { Option } = Select;

  const { name, surname, fatherName, specialty, email } = contact;

  let history = useNavigate();

  const onSubmit = () => {
    if (contact) {
      ADD_CONTACT(contact);
      history("/contacts");
      console.log(contact);
      toast.success("Contact successfully added");
    }
  };

  const selectOptions = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
  ];

  return (
    <>
      <Form
        onFinish={onSubmit}
        className={styles.form}
        name="myForm"
        initialValues={{
          remember: true,
        }}
        autoComplete="off"
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 16,
        }}
      >
        <div className="row">
          <Form.Item
            label="Name"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input
              placeholder="Enter Your Name"
              value={name}
              name="name"
              onChange={(e) =>
                setContact({ ...contact, [e.target.name]: e.target.value })
              }
            />
          </Form.Item>
        </div>

        <Form.Item
          label="Surname"
          rules={[{ required: true, message: "Please input your surname!" }]}
        >
          <Input
            placeholder="Enter Your Surname"
            value={surname}
            name="surname"
            onChange={(e) =>
              setContact({ ...contact, [e.target.name]: e.target.value })
            }
          />
        </Form.Item>

        <Form.Item
          label="Father Name"
          rules={[{ required: true, message: "Please input your surname!" }]}
        >
          <Input
            placeholder="Enter Your FatherName"
            value={fatherName}
            name="fatherName"
            onChange={(e) =>
              setContact({ ...contact, [e.target.name]: e.target.value })
            }
          />
        </Form.Item>

        <Form.Item
          label="Email"
          rules={[{ required: true, message: "Please input your mail!" }]}
        >
          <Input
            name="email"
            placeholder="your mail"
            value={email}
            onChange={(e) =>
              setContact({ ...contact, [e.target.name]: e.target.value })
            }
          />
        </Form.Item>

        <Form.Item
          label="Specialty"
          rules={[{ required: true, message: "Please input your specialty!" }]}
        >
          <Input
            name="specialty"
            placeholder="your specialt"
            value={specialty}
            onChange={(e) =>
              setContact({ ...contact, [e.target.name]: e.target.value })
            }
          />
        </Form.Item>

        <Form.Item label='Category'>
          <Select
            onChange={(e)=>setContact({ ...contact, [e.target.name]: e.target.value })}
            defaultValue='category'
            value={contact.test}
            name="test"
            style={{
              width: 120,
            }}
          >
            {selectOptions.map((item) => (
              <Option key={item.value} value={item.value}></Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item label="Gender">
          <Radio.Group
            onChange={(e) =>
              setContact({
                ...contact,
                [e.target.name]: e.target.checked ? e.target.id : "",
              })
            }
            name="gender"
            rules={[{ required: true, message: "Please  your gender!" }]}
          >
            <Radio
              id="female"
              value="Female"
              checked={contact.gender === "female"}
            >
              Female
            </Radio>
            <Radio id="male" value="Male" checked={contact.gender === "male"}>
              Male
            </Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item>
          <Checkbox
            name="updatesNotification"
            checked={contact.updatesNotification === "update"}
            id="update"
            onChange={(e) =>
              setContact({
                ...contact,
                [e.target.name]: e.target.checked ? e.target.id : "",
              })
            }
          >
            I want to be notified of updates
          </Checkbox>
        </Form.Item>

        <div className={styles.buttons}>
          <Button type="primary" htmlType="submit">
            Add contact
          </Button>
          <NavLink to="/contacts">
            <Button danger>Cancel</Button>
          </NavLink>
        </div>
      </Form>
    </>
  );
};

export default Form1;

CodePudding user response：

onChange Event in Antd Select only gives the Selected Value, it will not return any event

So Modifying your code into below will fix your issue..

       <Select
            onChange={(e)=>setContact({ ...contact, test : e })}
            defaultValue='category'
            value={contact.test}
            name="test"
            style={{
              width: 120,
            }}
          >
            {selectOptions.map((item) => (
              <Option key={item.value} value={item.value}></Option>
            ))}
          </Select>