CODEWITHSUNDEEP
javascriptreactjs
hearty
hearty

Reputation: 731

How to totally disable a react component?

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?

Upvotes: 22

Views: 47079

Answers (4)

Aravinda Meewalaarachchi
Aravinda Meewalaarachchi

Reputation: 2629

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>
    )
  );
};

Upvotes: 4

Karo Hovhannisyan
Karo Hovhannisyan

Reputation: 492

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>
    )
}

Upvotes: 37

Mayank Shukla
Mayank Shukla

Reputation: 104369

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' />

Upvotes: 11

Shubham Khatri
Shubham Khatri

Reputation: 281656

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>
}

Upvotes: 3

Related Questions