How to totally disable a react component?

Question

I have a react component which has some buttons and text inputs. I want to totally disable all the things inside this component until some other works are complete. How to make the entire inner component disabled?

I want to show it ..design requirements ..but just low opacity but the click should not work for that div — hearty, Jul 10 '18 at 07:35

score 34 · Answer 1 · edited Jul 10 '18 at 09:13

34

You can add disabled props and use CSS to disable div

const MyComponent = ({disabled}) => {
    return (
        <div style={disabled ? {pointerEvents: "none", opacity: "0.4"} : {}}>
            <h1> Text</h1>
            <input type="text"/>
            <input type="password"/>
            <button>Login</button>
        </div>
    )
}

edited Jul 10 '18 at 09:13

Abdullah

2,015
2
20
29

answered Jul 10 '18 at 08:13

Karo Hovhannisyan

462
3
7

2

Who would've guessed that the answer is CSS? Thanks mate! – Brandon Howard Jul 11 '19 at 01:26
Where were you all this time. It worked really well. Spend hours to find perfect solutions for this. Thanks a lot.... – Alok Ranjan Aug 14 '20 at 17:27
1

Would you be able to navigate via keyboard to the input field and enter stuff? – noBillSide Sep 10 '20 at 07:49
1

Not a great answer. User can still navigate to the controls via the keyboard, and use them. – Neo Oct 17 '21 at 16:49

score 11 · Answer 2 · answered Jul 10 '18 at 08:03

Better to use form and fieldset, and put all the input/button elements inside that. You can disable all of them by setting the property disabled to fieldset.

Refer MDN Doc for more details.

Working example:

class App extends React.Component {
  constructor () {
    super()
    this.state = { disable: false }
  }
  
  toggleDisable = () => this.setState(prevState => ({disable: !prevState.disable}))
  
  buttonClick = (e) => {
    e.preventDefault();
    console.log('button clicked');
  }
  
  render (){
    return (
      <div>
        <button className='toggle' onClick={this.toggleDisable}>Toggle Disable</button>
        <form>
          <fieldset disabled={this.state.disable}>
            <input />
            <button onClick={this.buttonClick}>Button</button>
          </fieldset>
        </form>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

.toggle {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

Note that, even though the inputs are grey in IE11, you can still type in them (bug). — Caramiriel, Jul 10 '18 at 08:09
Much better answer than [the one](https://stackoverflow.com/a/51260245/197591) currently with the highest votes. This one is true disabling that prevents keyboard interaction, also. — Neo, Oct 17 '21 at 17:26

Aravinda Meewalaarachchi · Answer 3 · 2022-01-26T00:17:32.407

4

You can use disabled prop pattern to save the day.

const App = () => {
  return (
    <div>
      <SomeComponent disabled />
    </div>
  );
};

const SomeComponent = ({ disabled = false }) => {
  return (
    !disabled && (
      <div>
        <h2>Disable SomeComponent to see magic happen!</h2>
      </div>
    )
  );
};

edited Jan 26 '22 at 00:17

answered Jan 05 '22 at 07:37

Aravinda Meewalaarachchi

2,551
1
27
24

score 3 · Answer 4 · answered Jul 10 '18 at 07:37

3

All you need to do is add a disabled prop on the component and pass it on to the inner fields like

<MyComponent disabled={shouldComponentBeDisabled} {...otherProps} />

and in implementation

const MyComponent = ({disabled}) => {
    return <div>
          <button disabled={disabled}>someBtn</button>
          <input type="text" disabled={disabled}/>
    </div>
}

answered Jul 10 '18 at 07:37

Shubham Khatri

270,417
55
406
400

2

that way it would be too difficult ..i have lots of buttons and input..can that be done for the entire div being rendered in the child? – hearty Jul 10 '18 at 07:38
Unfortunately with React, the above is the best you can do, but the same thing can be done using jquery https://stackoverflow.com/questions/15555295/how-to-disable-div-element-and-everything-inside However its not recommended to use jquery with react – Shubham Khatri Jul 10 '18 at 07:47

How to totally disable a react component?

4 Answers4