How can ı add my values to table in react

Question

I am trying to make form project. When person submmit to personal info to form. I want add this info to Table. But I get this error when I am adding info to table.

Uncaught Error: Objects are not valid as a React child (found: object with keys {inputValue}). If you meant to render a collection of children, use an array instead.

I know this is related to const newToTable part. But I don't know how to make it right. Please help me, ıf you know how can ı solve this problem.

This is my contact.js

const buttonOnClick = () => {
    if (inputValue === "" || emailValue === "" || phoneNumberValue === "") {
      setShowModal(false);
    } else {
      setShowModal(true);
      // setInputValue("");
      //setEmailValue("");
      //setPhoneValue("");
      // sa
    }
    
      const newToTable = [...addFormData, { fullName:{inputValue},email:{emailValue}, phoneNumber:{phoneNumberValue},country:{countryValue} }];
      setAddFormData(newToTable);
  
    console.log(`Form submitted, ${showModal}`);

  }

This is my AddTable.js

 <div className="app-container">
        <form>
            <Table>
                <thead>
                    <tr>
                        <th>Full Name</th>
                        <th>Email </th>
                        <th>Phone Number</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>

                    {addFormData.map((addForm) => (
                        <tr>
                            <td>{addForm.fullName}</td>
                            <td>{addForm.email}</td>
                            <td>{addForm.phoneNumber}</td>
                            <td>{addForm.counry}</td>
                        </tr>
                    ))}

                </tbody>
            </Table>
        </form>
    </div>

Answer 1

You've accidently wrapped your form values in objects here:

const newToTable = [...addFormData, { fullName:{inputValue},email:{emailValue}, phoneNumber:{phoneNumberValue},country:{countryValue} }];

For example fullName:{inputValue} will evalute to fullName: { inputValue: 'the value' }

Instead you need:

const newToTable = [
  ...addFormData,
  {
    fullName: inputValue,
    email: emailValue,
    phoneNumber: phoneNumberValue,
    country: countryValue,
  },
];

This is what the error means by Objects are not valid as a React child - when it tries to render your table, the values being passed are objects such as { inputValue: 'the value' } (this is the (found: object with keys {inputValue}) part of the error - an object with inputValue as a key).