I have a "sign up" button. When it is clicked, I would like for it to render a new ponent, called "SignUp". I would like for the new ponent to replace the "sign up" button.

Currently, I am using setState so that when the button is clicked, a new ponent is rendered. However, the button is not being replaced, the "SignUp" ponent is just rendered beside the button. What may be a good approach for me to replace the button with the new ponent being rendered?

I have provided my code below:

  export default class SignUpSignIn extends Component {

  constructor() {
     super();

     this.state = {
       clicked: false
     };

     this.handleClick = this.handleClick.bind(this);
   }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render () {

    return (
    <div id="SignUpSignInDiv">

      <Col md="12" sm="12" xs="12" className="text-center">

        <div onClick={this.handleClick}>

          {this.state.clicked ? <SignUp /> : null}

        <Button id="SignUpButton" color="primary"> Sign Up </Button>

        </div>

       </Col>

    </div>
  )

  }
}

I have a "sign up" button. When it is clicked, I would like for it to render a new ponent, called "SignUp". I would like for the new ponent to replace the "sign up" button.

Currently, I am using setState so that when the button is clicked, a new ponent is rendered. However, the button is not being replaced, the "SignUp" ponent is just rendered beside the button. What may be a good approach for me to replace the button with the new ponent being rendered?

I have provided my code below:

  export default class SignUpSignIn extends Component {

  constructor() {
     super();

     this.state = {
       clicked: false
     };

     this.handleClick = this.handleClick.bind(this);
   }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render () {

    return (
    <div id="SignUpSignInDiv">

      <Col md="12" sm="12" xs="12" className="text-center">

        <div onClick={this.handleClick}>

          {this.state.clicked ? <SignUp /> : null}

        <Button id="SignUpButton" color="primary"> Sign Up </Button>

        </div>

       </Col>

    </div>
  )

  }
}

• javascript
• reactjs

• So you are either displaying the button or the ponent, correct? You can put your button in the ternary operator. Like so: { this.state.clicked ? <SignUp /> : <Button ...>Sign Up</Button>} – wmash Commented Mar 18, 2018 at 15:41
• Additionaly, the onClick handler should really be bound to the button instead of the div wrapping the button and the sing up form. – Dom Commented Mar 18, 2018 at 15:46

2 Answers 2

Well, you're not rendering both ponents conditionally, only the SignUp. Instead of having null in your ternary, render the sign in button when state.clicked === false:

render () {
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
        {this.state.clicked ? (
          <SignUp />
        ) : (
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>
        )}
       </Col>
    </div>
  )
}

one way to do it is like this , i didnt test it yet but it should work

render () {
let show = <div></div>
if(this.state.clicked){
show = <SignUp />
}
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
          {show}
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>

       </Col>
    </div>
  )
}