CODEWITHSUNDEEP
reactjspropertiessemantic-uisemantic-ui-react
lina
lina

Reputation: 77

disable semantic Button in react

how to dynamically set semantic Button to disabled in react:

<Button disabled>click here<Button>

i tryed to set it with state but it gave me an error

this.setState({d:'disabled'})
return (<Button {this.state.d} >click here<Button>)

Upvotes: 4

Views: 5403

Answers (1)

Per Svensson
Per Svensson

Reputation: 744

It's impossible to tell how your Button is handling disabled under the hood but assuming it´s working like the JSX element .

First, JSX elements are just functions that takes a set of arguments (props). So you still need to give it a disabled:boolean. As you can see below you need to provide a name and a value. Your attempt at {this.state.d} gives just the value true/false. Please look at the snippet below for how you can do it. Either explicit or by giving it a named variable or finally by spreading out an object.

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      disabled: true
    }
  }
  render() {
  const disabled = this.state.disabled; //Pull out the value to a named variable
    return (  
    <div>
      <button disabled={false}>Button1</button> 
      <button disabled>Button2</button> 
      <button {...this.state}>Button3</button>  
    </div>
    );
  }
}

React.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="react_example"></div>

Upvotes: 3

Related Questions