CODEWITHSUNDEEP
htmlreactjsonclick
M.A.G
M.A.G

Reputation: 549

Make button invisible onClick and show another button

How can i make a button invisible in ReactJS once i click on it and show another button 

  <button className ="btn" id="btnn"  onClick={this.onClick} >Ask a question </button>

and here is my attempt to do the onclick function which disables it 

onClick= function() {
    btnn.disabled
}

Upvotes: 0

Views: 258

Answers (3)

Nishant Dixit
Nishant Dixit

Reputation: 5522

Try this :)

class Test extends Component {
  constructor(propss) {
    super(propss);
    this.state = {
      hide: false,
      disable: false
    };
    this.toggleButton = this.toggleButton.bind(this);
    this.disableButton = this.disableButton.bind(this);
  }

  toggleButton(value) {
    this.setState({ hide: value });
  }
  disableButton() {
    this.setState({ disable: true });
  }
  render() {
    return (
      <div>
        {!this.state.hide && 
          <button onClick={() => this.toggleButton(true)}>Hide</button>
        }
        <button onClick={this.disableButton} disabled={this.state.disable}>
          disable
        </button>

      {(this.state.hide || this.state.disable) && (
      <button style={{ background: "green", color: "white" }}>
        New button
      </button>
    )}
      </div>
    );
  }
}

Upvotes: 1

Waweru Mwaura
Waweru Mwaura

Reputation: 267

just create a state, that controls if your button will be shows or not. then you can use conditional rendering if the state is true.. 

   Something like ....


        Import React from 'react'

        class MyComponent extends React.Component ()
        {
        this.state {
        isClicked: false
        }

        this.setState(isClicked: true)
        render() {
          {isClicked} = this.state  
        return (
        // your code here

        {!isClicked &&
         <button className ="btn" id="btnn" onClick={this.onClick}> Ask a 
         question </button>
        } // will only display the button if the state is false, else if 
          state is true, it will not 
        );
        }}

Upvotes: 0

Sabbiu Shah
Sabbiu Shah

Reputation: 1709

Maintain a state:

this.state = { invisible: false }

Then,

<button
    style={this.state.invisible ? {display:"none"} : {}} 
    className ="btn" id="btnn"  onClick={this.onClick.bind(this)} >Ask a question 
</button>
<button
    style={!this.state.invisible ? {display:"none"} : {}} 
    className ="btn" id="btnn"  onClick={this.onClick.bind(this)} >Other Button 
</button>

And,

onClick= function() {
    this.setState({ invisible: !this.state.invisible })
}

Upvotes: 0

Related Questions