How to clear input values of dynamic form in react

I have a dynamic form as a functional component which is generated via a class based component. I want to make reset button which clears the input field values and sets the state to null array.

My form is as follows:


const Form = (props) => {
    return (
        <div>
        {props.Items.map(item => (
          <
            name={item.name}
            placeholder={item.description}
            data-type={item.dtype}
            data-group={item.gcode}
            onChange={e => props.onChangeText(e)}
          /> 
        )
        )}
      </div>

    );
}
export default Form 

My main class component looks like

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
          Items:[],
          itemvalues:[]
            }
        this.onChangeText = this.onChangeText.bind(this);
}
onChangeText = e => {


      const copy = JSON.parse(JSON.stringify(this.state.itemvalues));
      //debugger;

      // get data-group value
      const itemvalue = e.target.dataset.group;
      const keyType = e.target.dataset.type;

      if (!copy[0][itemvalue]) {
        copy[0][itemvalue] = []; 
      }

      const itemvalues = copy[0][itemvalue];
      const index = this.findFieldIndex(itemvalues, e.target.name);

      if (index < 0) {
          copy[0][itemvalue] = [
            ...itemvalues,
            { [e.target.name]: e.target.value.split(",").map(this.trimText) }
          ];
      } else {
          // update the value
          copy[0][itemvalue][index][e.target.name] = e.target.value
            .split(",")
            .map(this.trimText);

      }

      this.setState({ itemvalues: copy });
    };

return(
<div>

        render={()=>  <Cart Items={this.state.Items}
                    getItems= {this.getItems}
                     onChangeText = {this.onChangeText}
                   />
             }
        </div>
)
const Cart = (props) => {

  useEffect(() => {
   props.getItems(props.items);
  }, [props.items]);




    return ( 

        <div>

        <Form Items={props.state.Items} 
                    onChangeText = {props.onChangeText}
                   />
        </div>


  };

export default Cart;

The values of the form field are stored in state as an array of Items[{}] (initially empty, as users fill up the form fields, items are added in the array)

I want to make a reset button, clearing all the input values and initializing the Items array to null. However, the problem I’m facing is that since, it is a dynamic form and a functional component it doesn’t have a predefined state for each individual form field making it difficult to set value to null. Can someone please help, I’m stuck on this from a long time

My code is available here: https://codesandbox.io/s/beautiful-archimedes-o1ygt

1 Like

As @camperextraordinaire mentioned, it would be helpful if you can clean up the syntax errors. It will make it easier for anyone here to help; we can copy and paste your code into our editors and work from there. If possible and if you have time, maybe reproduce a minimal version of your app in something like codesandbox.io.

Anyway, from my minimal understanding, your Items state resides in your App component. If you pass a reset function as props to the Form component, you can just use the function in a button onClick handler.

I tried replicating your code in codesandbox below:

Edit restless-dream-fwnjy

In the Form component, I used the useState hook to make give the component state-like features.

const [newItem, setNewItem] = useState({name: ""})

Since Items reside in App, once you click the reset button, it will reset Items to null and that will trigger a re-render thus emptying the form.

Hopefully that helps. Do tell me if I’m wrong because I’m very certain that I am.

Hi, I did the same thing, it resets the state but it doesnt clear the input fields. I will remove the syntax errors and update the question

1 Like

I’ve uploaded a sandbox link, please have a look

1 Like

Thanks for the update.

I’ll look at your codesandbox whenever I’m free today and see if I can help you get what you want.

And what’s the purpose of itemvalues?

In your handleReset, you reset the state for itemvalues but not Items. Is that intentional? Do you want to reset the itemvalues only without removing the items?

Yes, it is intentional. Im using Items to generate my input fields. So I want 4 input fields(one for each item). itemvalues on the other hand, is an array which basically stores the input field values.
My onChangeText function is quite complex because I wanted to get the items groupwise.
So, the state for Itemvalues should looks like this:

Itemvalues:
 0:
   groupA: 
            item1: itemvalue1
            item2: itemvalue2
  groupB: 
            item3: itemvalue3
            item4: itemvalue4

Now I see. Hmm…that means your itemvalues will be a nested state and that can be problematic since React only does shallow comparison.

And your Form component’s inputs values are tied to Items rather than itemvalues? Is that intentional as well?

Edit: But thinking again, you’re actually emptying rather than updating, so it should work…

Yea because, Items array is populated using another function (which I’ve not shown here because it makes an API call). So, I thought it would be easier to create another array which stores the values.

and for resetting the values, im just updating the state, but it is not clearing the input fields, just updating the state
is it because Im using useEffect hook ?
Do I need to use getDerivedState function ?

1 Like

is it because Im using useEffect hook ?
Do I need to use getDerivedState function ?

I’m not sure. Someone who’s better than me might be able to help.

and for resetting the values, im just updating the state, but it is not clearing the input fields, just updating the state

I’m probably wrong but since your Form component’s input is tied to Items, resetting itemvalues won’t reset the input values.

So, what do you suggest in this case ?

1 Like

What I tried was drilling into itemvalues to get the data and create the inputs with that (e.g map through itemvalues instead of Items in your Form component).

That way when you reset your itemvalues, the input fielda will also reset while preserving the state of your Items.

The issue here is my skills are not good enough to implement my own suggestion. Here’s a partial implementation.

Another method is to reset Items instead. Resetting items will reset the input fields too. If your data comes from an API, you can just refetch the data if you want the initial Items data back.

Sorry I can’t be more helpful. At first glance, I thought the problem is simple but I was wrong about that.

I know its a bit tricky! Ive been stuck at it for so long. :frowning:
Anyways Thanks alot for helping