CODEWITHSUNDEEP
reactjs
Dinuka
Dinuka

Reputation: 37

Disable or active buttons using reactjs

In my application there is two component called Employee and EmplyeeButtonGroup.

 export default class Employee extends Component {
       render() {
        return (

         <h1>Permanent</h1>
         <EmplyeeButtonGroup />
         <EmplyeeButtonGroup />

         <h1>Temporary</h1>
         <EmplyeeButtonGroup />
         <EmplyeeButtonGroup />

)}
}


export default class EmplyeeButtonGroup extends Component {
 render() {
        return (
          <Button>Add</Button>
          <Button>Delete</Button>
          <Button>Send</Button>

)}
}

Under the <h1>Temporary</h1> this heading, I want to disable Delete and Add buttons.I can do this by creating two component for temporary and permanent employees. But I am looking for another way. How can I do this using react?

Thanks in advance.

Upvotes: 0

Views: 370

Answers (2)

awran5
awran5

Reputation: 4536

class Employee extends React.Component {

  //...

  render() {
    return (
      <React.Fragment>
        <h1>Permanent</h1>
        {/* Just add whatever buttons want to enable as a prop */}
        <EmplyeeButtonGroup add delete send />

        <h1>Temporary</h1>
        <EmplyeeButtonGroup send />
      </React.Fragment>
    );
  }
}

class EmplyeeButtonGroup extends React.Component {

  //...

  render() {
    return (
      <React.Fragment>
        <button disabled={!this.props.add}>
          Add
        </button>
        <button disabled={!this.props.delete}>
          Delete
        </button>
        <button disabled={!this.props.send}>
          Send
        </button>
      </React.Fragment>
    );
  }
}


function App() {
  return (
    <div className="App">
      <Employee />
    </div>
  )
}

ReactDOM.render(<App /> , document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Upvotes: 1

Pradip Kachhadiya
Pradip Kachhadiya

Reputation: 2235

export default class Employee extends Component {
       render() {
        return (

         <h1>Permanent</h1>
         <EmplyeeButtonGroup event = 'False'/>
         <EmplyeeButtonGroup event = 'False'/>

         <h1>Temporary</h1>
         <EmplyeeButtonGroup event = 'True'/>
         <EmplyeeButtonGroup event = 'True'/>

)}
}


export default class EmplyeeButtonGroup extends Component {
 render() {
        return (
          <button disable = {(this.props.event)==='True'?"true":"false"}>Add</button>
          <button disable = {(this.props.event)==='True'?"true":"false"}>Delete</button>
          <button>Send</button>

)}
}

Upvotes: 0

Related Questions