Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]

Question

Disclaimer I am new to developing. I am having trouble when I try and save my changes on my input field I get an error saying "Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist()." Also if I set the "value" instead of the "defaultValue" when I type in the field I get [Object, object].

This is the input component:

const Profile = ({
  profile,
  mCatalog,
  sCatalog,
  isEditing,
  onChange,
  restoreData,
  userID,
}) => {

const updateProviderNotes = (event) => {
    
    const { name, value } = event.target;
    onChange(name)(value);

  }

return (
          <Input
            type="textarea"
            disbaled={false}
            name="providerNotes"
            value={providerNote}
            onChange={updateProviderNotes}
            />
      )

const Editor = ({ source, onChange, items, oldItems, name }) => {
  return (
    <div className="d-flex ml-3">
      <div className={styles.bubble}>
        <ListEditor
          items={items}
          oldItems={oldItems || []}
          itemListSource={source}
          onChange={onChange(name)}
        />
      </div>
    </div>
  );
};
export default Profile;

this is a portion of the parent component

const ProfileData = ({
  profile,
  mCatalog,
  sCatalog,
  page,
  catalog,
  userID,
  setProfile,
}) => {
  const [editingProfile, setEditingProfile] = useState(false);
  const [oldProfile, setOldProfile] = useState(false);

  useEffect(() => {
    setOldProfile(profile)
  }, [])

  const handleMProfileCancel = () => {
    setProfile(oldProfile)
  }
  const handleMedicalProfileSave = () => {
    console.log("profile", profile)
    console.log(typeof profile.medicalProfile.providerNotes)
    api.UserRecords.updateMedicalProfile(userID, profile.medicalProfile)
    setOldProfile(profile)
    
  }

  const updateMedicalProfileDetails = (fieldName) => (value) => {
    
    setProfile({ ...profile, mProfile: {...profile.mProfile, [fieldName]: value }});
  };
 return (
{page === "medicalProfile" && (
        <InfoEditWrapper
          data={oldProfile.medicalProfile}
          onCancel={handleMedicalProfileCancel}
          onSave={handleMedicalProfileSave}
        >
          <Profile
            profile={profile.medicalProfile}
            medicalCatalog={medicalCatalog}
            surgicalCatalog={surgicalCatalog}
            onChange={updateMedicalProfileDetails}
            userID={userID}
          />
        </InfoEditWrapper>
      )}
)
export default ProfileData;

Any advice would be helpful thanks!

Updated my answer, does this solve your issue? – Dax Sep 21 '20 at 19:00 — Dax, Sep 21 '20 at 19:00

Dax · Accepted Answer · 2020-09-21T18:57:21.067

1

For your warning message, I would refer to this question. You are basically getting this error because you are using your event in an asynchronous context (updating your state) which isn't allowed. You can avoid this error if you assign your event to a local variable and reference it.

if I set the "value" instead of the "defaultValue" when I type in the field I get [Object, object]

Your onChange event handler will receive a Synthetic event object and your parameter you're passing with it. With your current code you assigned the whole event object as the field value.

Your updateMedicialProfileDetails method that you are passing as the onChange prop isn't in your question so I'm using the updateProfileDetails method as an example:

The following code should work:

  const updateProfileDetails = (fieldName) => (event) => {
    const { value } = event.target;
    setProfile({ ...profile, mProfile: {...profile.mProfile, [fieldName]: value }});
  };

Your name parameter you are passing with this function is unnecessary since your event object will have the name attribute available, so your code can be updated to the following:

  <Input
    type="textarea"
    name="providerNotes"
    value={profile.providerNotes}
    onChange={onChange}
    oldValue={restoreData.providerNotes}
  />

The event handler:

  const updateProfileDetails = (event) => {
    const { name, value } = event.target;
    setProfile({ ...profile, mProfile: {...profile.mProfile, [name]: value }});
  };

edited Sep 21 '20 at 18:57

answered Sep 21 '20 at 18:42

Dax

767
4
11
29

Removing the parameter from the `onChange` function did get rid of my [Object, object] issue when typing in the field but even with these changes I am still showing a synthetic even error. I believe once I can solve that I will be able to actually type in the field. – CourtneyJ Sep 21 '20 at 20:01
I have updated the code to show the changes Ive made. Im still unable to type in the field. I have also tried calling `onChange` in the updatedProviderNote passing in the the name and value like this `onChange(name)({ value })` this created a new issue of `value.persist is not a function` . I am understanding that the object issue is due to async I thought creating this helper function would solve my problem but it now doesnt allow me to change the state at all. Thanks for all your help btw. – CourtneyJ Sep 22 '20 at 00:02
Can you add your code where you are trying to update your state? `onChange={updateMedicalProfileDetails}` can you show me this `updateMedicalProfileDetails()`? – Dax Sep 22 '20 at 10:04
yes, it was always there just labeled wrong I have updated it now to show `updateMedicalProfileDetails()`. – CourtneyJ Sep 22 '20 at 13:11
I've got it working I needed to pass into the onChange like this `onChange(name)(value)` now it all works. Thanks for your help! – CourtneyJ Sep 22 '20 at 15:43
I'm curious still to see how you got it working, mind updating your question with the working code? – Dax Sep 22 '20 at 16:33
I just updated to the working code. I had to update the onChange handler to pass both the field name and the value and pass the value as a string to get around the issue I was having with [object, Object] – CourtneyJ Sep 22 '20 at 20:19

Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]

1 Answers1