Dynamic Fields with button

[Alex Niznik]

Hi, I'm trying to find a way to generate dynamic fields by clicking a button.

The code below updates the form only after changing the radio value.

Code Sandbox

[Bastian Ermann]

It's because of the way you're updating the state. You should never mutate the old state like in handleAddField using push. This is because React will internally compare prev with the new returned value, since you mutate the prev value and pass the same ref, it won't re-render.

In order to get it working you should change the handleAddField to:

  const handleAddField = () => {
    setMeta(prev => {
      return [...prev, {
        key: "otherFruit",
        label: "Other"
      }];
    });
  };

[Alex Niznik]

Thanks!