Disable entire form elements with respect to a state. React

Question

I am disabling the inputs using the isFetching prop, but this is getting reduntant as I have to keep this in every input field. Is there a way to disable the entire form? Like a disable property in <form> tag or something?

<form>
  <input type="text" disabled={this.props.isFetching} />
  <input type="text" disabled={this.props.isFetching} />
</form>

score 47 · Accepted Answer · edited May 23 '17 at 10:31

47

I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.

You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 25 '16 at 07:46

Mateus Zitelli

1,092
1
12
22

16

Shouldn't it instead be "You should insert a `
` element INSIDE your form"?
– FMA Jun 19 '18 at 12:45

score 16 · Answer 2 · answered Sep 18 '17 at 22:30

16

I had the same issue and this worked for me:

 <fieldset disabled={true}>

Where true would be some "prop.setting"...

answered Sep 18 '17 at 22:30

Bertus Kruger

1,265
1
19
30

The best solution. – Praveen Danagoudru Jul 13 '21 at 09:01

score -12 · Answer 3 · answered Mar 25 '16 at 07:14

-12

Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.

answered Mar 25 '16 at 07:14

Manish62

162
1
1
13

3

This is exactly what OP wants to avoid, as mentioned in the question. – Balázs Apr 23 '17 at 08:46

Disable entire form elements with respect to a state. React

3 Answers3

Linked