Set input on disabled based on a variable

user_9099077 0
Viewed 288

Having a normal input form it's straightforward to make it disabled:

<input
  {...field}
  as={Input}
  disabled={disableInput}
  className="my-class"
  placeholder="write data"
  value={...}
/>

But how can this be done if the input has a different structure like:

  <input
    {...getInputProps({
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

I've tried several ways but didn't work. One way was to add disabled attribute on top level, other approach was to add it inside getInputProps, none of them work.

  <input
    disabled={disableInput}
    {...getInputProps({
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

or

  <input       
    {...getInputProps({
      disabled={disableInput}
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

Any ideas?

reactjs input css html javascript
1 Answers

Based on Thomas Kuhlmann's comment. the solution is to add the disabled attribute inside but not like disabled={disabledInput}. The correct way is disabled: disabledInput.

  <input       
    {...getInputProps({
      disabled: disabledInput
      placeholder: 'write data',
      className: 'my-class',
    })}
  />
user_90990770
Related