javascript - Update empty String with an onClick Event

Question

I just have a small problem.

I do not know how to update my empty string when handling a click event. I am using React.

This is the most important part of my code:

// MultiStepform.js

const defaultData = {
  // I would like to update this
  Grund: '',
  H: '',
  W: '',
  G: '',
};

export const MultiStepFrom = () => {
  const [formData, setForm] = useForm(defualtData);
  const {step, navigation} = useStep({
    steps, 
    initialStep: 0,
  });

  const props = {formData, setForm, navigation};
};

H?user.js

I would like to perform her the onClick event)

   function H?user({formData, setForm, navigation}) {
      const {Grund, H, W, G} = formData;

          const changState = () => {
          navigation.next();
          setForm([{Grund: "newvalue"}]); 

       }
      );
       }

          return (
           <div
          className="container__containerimgage"
           name="Grundstück"
               value={Grundstück}
                onClick={changState}
                   
         );
            }

question from:https://stackoverflow.com/questions/65853716/update-empty-string-with-an-onclick-event

Answer 1

Issue

You can't directly manipulate state, it's const. You should use the state updater function.

Solution

Use setForm function to update the form state.

useForm

You see useForm takes the name of your input and changes the object, so you only have to create one useForm.

Code

function H?user({formData, setForm, navigation}) {
  const { Grund, H, W, G } = formData;

  const changeState = (changeEvent) => { // <-- new onChange event with value
    navigation.next();
    setForm(changeEvent); // <-- pass event to updater
    ...
  }

  ...

  <input
    value={Grund}
    name="Grund" // <-- ensure the input name matches field name
    onChange={changeState}
  />