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>
)
}
}
Share
Improve this question
asked Mar 18, 2018 at 15:32
user8891334user8891334
1711 gold badge4 silver badges10 bronze badges
2
-
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
Reset to default 6Well, 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>
)
}