How to not clear input field onClick

Question

I'm working with React JS and I want to make a hidden button for a text box, of type "Row", such that when I click onto that box, a description will appear on the side, the Row has this structure

 <div>
    <form key={id}>
        <button
          className="name"
          type="submit"
          onClick={clickFunc} 
        >
          {data.text}
        </button>
      </form>
  </div>

Where clickFunc makes a call to enterMouseFunc, a function passed in when called in another component file:

const clickFunc = useCallback((e) => {
    e.preventDefault();
    enterMouseFunc(e, data);
  });

In the description box, there is an input field,

// some other details here
<form key={id} onClick={inputClick}>
   <input
    type="text"
    className="inputParam"
    name={id}
    onChange={handleChange}
    />
   <button
    type="submit"
    style={{ display: "none" }}
    ></button>
</form>

My inputClick:

const inputClick = (e) => {
    e.preventDefault();
  };

My handleChange:

const handleChange = (e) => {
    e.preventDefault();
    setParameters({ name: e.target.name, value: e.target.value });
  };

Which works just fine. However, whenever I click on the Row again, or switch between other Rows, all user's inputs get cleared up. The page doesn't refresh since I already suppress this behavior, but the inputs still get deleted. How to stop it from clearing up the inputs all the time?

Edit: This is how the interface looks like, where the grey boxes are of type Row. When we click on these boxes, the description will appear on the right as shown:

Answer 1

Are you by any chance triggering the onSubmit of the form? You prevent the inputClick but do not prevent the submit. However, im not sure it would be invoked. Why have a hidden submit button at all?

Answer 2

Does setParameters contain all of the fields values? If so you should copy the existing values before reassigning name and value. If not the issue is elsewhere.

A fix would look like this if that is the case:

const handleChange = (e) => {
    e.preventDefault();
    setParameters({...parameters,  name: e.target.name, value: e.target.value});
  };

Answer 3

Unless you would like to submit the form, then you don't necessarily need a <form> element?

Also, having a click event handler on that element (instead of say, a button) is not really common, I am not totally surprised that it causes side effects.

What I would do is remove forms that do not submit: just the standalone inputs that trigger setState / setReducer on change events.

Then you should be able to remove hidden buttons, preventDefault calls, etc.

About the cleaning of the values, I suspect your id value in the key prop to change, which would cause a re-mount of the form children.