Как добавить и отобразить первые буквы имени и фамилии из формы без какой-либо ошибки с нулевым значением или ошибки charAt в react

#reactjs #react-forms

Вопрос:

Я новичок в реагировании и создаю единую страницу, которая берет данные из формы и отображает их в таблице из введенных данных. Без заполнения формы при нажатии на кнопку сохранить отображается ошибка, я думаю, это связано с тем, что при сохранении печатается пустая стрелка. без добавления сведений о форме при нажатии на кнопку сохранить возникает ошибка

Вот в чем ошибка

 const Subcontentinfo = () => {

    const [contacts, setContacts] = useState([
        { id: 1, firstname: "Mike", lastname: "Huston", surname: "MH", mailid: "mikehustoncorp@live.com", company: "Estra Boutique ltd." },
        { id: 2, firstname: "Richard", lastname: "", surname: "R", mailid: "mikehustoncorp@live.com", company: "Amazonia online" },
        { id: 3, firstname: "James", lastname: "Dustin", surname: "JD", mailid: "mikehustoncorp@live.com", company: "Alibaba Traders .co" },
        { id: 4, firstname: "Amanda", lastname: "Paul", surname: "AP", mailid: "mikehustoncorp@live.com", company: "Estra Boutique ltd." }
    ]);
 const [addFormData, setAddFormData] = useState({
        id: "",
        firstname: "",
        lastname: "",
        surname: "",
        mailid: "",
        company: "",
    });
const handleChange = (event) => {
        const fieldName = event.target.name;
        const fieldValue = event.target.value;

        setAddFormData({ ...addFormData, [fieldName]: fieldValue });

    }
  const handleSubmit = () =>{
 const newContact = {
                id: contacts.length   1,
                firstname: addFormData.firstname,
                lastname: addFormData.lastname,
                surname: initialData(),
                mailid: addFormData.mailid,
                company: addFormData.company
            }

            setAddFormData({
                firstname: "",
                lastname: "",
                mailid: "",
                company: "",
            });

            setContacts([...contacts, newContact]);
}
const initialData2 = () => {
        let initial = addFormData.firstname.charAt(0)   addFormData.lastname.charAt(0);
        if (addFormData != "") {
            return initial;
        }
    }
 

Я думаю, что у меня ошибка с этой функцией

  **const initialData2 = () => {
        let initial = addFormData.firstname.charAt(0)   addFormData.lastname.charAt(0);
        if (addFormData != "") {
            return initial;
        }
    }**
 

Есть ли какое-либо решение для этого ?