Disable or active buttons using reactjs

Question

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.

If I do this way, then that same button in "Permanent" category also will disable.I need to disable some buttons in "Temporary" category. — Dinuka
– Dinuka, Commented Nov 15, 2020 at 12:43

awran5 · Accepted Answer · 2020-11-15 13:17:53Z

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>

Pradip Kachhadiya · Accepted Answer · 2020-11-15 12:59:27Z

0

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>

)}
}

answered Nov 15, 2020 at 12:59

Pradip Kachhadiya

2,24514 silver badges32 bronze badges

1 Comment

Dinuka Over a year ago

Thanks for the answer. But this answer do the same changes in both categories. And also disable should be disabled.

Collectives™ on Stack Overflow

Disable or active buttons using reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related