Tell us what’s happening:
This is a beta exercise. I am not so sure why it’s not working. Can someone help please?
Thanks,
Phillip
Your code so far
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
this.toggleVisibility = this.toggleVisibility.bind(this);
}
// change code above this line
}
// change code below this line
toggleVisibility(){
if(this.state.visibility){
this.setState({
visibility = false;
})
}else{
this.setState({
visibility = true;
})
}
}
// change code above this line
render() {
if (this.state.visibility) {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h1>Now you see me!</h1>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
</div>
);
}
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
.
Link to the challenge:
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.
Marmiz
April 24, 2018, 2:55am
2
You are setting the state object by passing an object and waiting for React to perform a shallow merge: therefore being an object this is not a valid syntax:
this.setState({
visibility = false;
})
However if you change it to a proper object, with :
and ,
it works
this.setState({
changed: true,
isAwesome: false,
a: 'string',
b: [1,2,3],
})
Hope it helps
3 Likes
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
this.toggleVisibility= this.toggleVisibility.bind(this);
// change code above this line
}
// change code below this line
toggleVisibility(){
var parathan;
parathan = this.state.visibility ? false : true
this.setState({
visibility : parathan
})
};
// change code above this line
2 Likes
Use ther “!” operator to update the boolean value inside the component state. The toggleVisibility() method would be like this:
toggleVisibility() {
this.setState({
visibility: !this.state.visibility
});
}
7 Likes
Can someone explain why I couldn’t simply do the following:
toggleVisibility() {
this.setState({
if (this.state.visibilty) {
visibility: false
}
else {
visibility: true
}
});
}
This seemed more concise and clear to me but wouldn’t work. I had to write this.setState() in both branches of the if / else statement.
This won’t work because you are setting up if else statement inside an object.
1 Like
Aha, I see.
Thanks for the help! I had code brain and a fogged head.
It is best practice to use callback when accessing previous state in setState
as such:
toggleVisibility() {
this.setState(prevState => ({ visibility: !prevState.visibility }));
}
There is no need to check whether this.state.visibility
is true or false in order to change it.