Tell us what’s happening:
“Render Conditionally from Props”
Describe your issue in detail here.
I just started to solve the problem involving Conditionality From Props in react. I did a few researches on Google and I figured out how to start solving the problem. But I’m a bit lost now. I don’t have a clue in how I’ll be able to solve the second part of the challenge. Your code so far
class Results extends React.Component {
constructor(props) {
super(props);
}
render() {
{/* Change code below this line */}
return <h1>{this.state.fiftyFifty? "You Win!": "You Lose!"}</h1>;
{/* Change code above this line */}
}
}
class GameOfChance extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 1
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => {
// Complete the return statement:
return {
counter: prevState
}
});
}
render() {
const expression = null; // Change this line
return (
<div>
<button onClick={this.handleClick}>Play Again</button>
{/* Change code below this line */}
{/* Change code above this line */}
<p>{'Turn: ' + this.state.counter}</p>
</div>
);
}
}
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.3 Mobile/15E148 Safari/604.1
Challenge: React - Render Conditionally from Props
It is an object with a property “counter”. So, that is the shape that prevState will have. So, you are returning the new state as an object with a property “counter” … and you are telling it that that property “counter” will also now have the shape of the previous state, object with a property “counter” . This will keep building out the object, bigger and bigger. We want the new state to be an object with a property “counter”. We want that “counter” to be a number. How is it related to the prevState?
Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the Results component as a child of GameOfChance , and pass in expression as a prop called fiftyFifty . In the Results component, write a ternary expression to render the h1 element with the text You Win! or You Lose! based on the fiftyFifty prop that’s being passed in from GameOfChance . Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they’ve played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
You haven’t attempted those yet. Do you have a specific question?
Tell us what’s happening:
Describe your issue in detail here.
I’m close to pass the challenge but I don’t know how to solve “prevState part.
class Results extends React.Component {
constructor(props) {
super(props);
}
render() {
{/* Change code below this line */}
return <h1>{this.props.fiftyFifty ? "You Win!": "You Lose!"}</h1>;
{/* Change code above this line */}
}
}
class GameOfChance extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 1
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => {
// Complete the return statement:
return {
counter: this.state.counter +1
prevState
}
});
}
render() {
const expression = Math.random() >= 5 ? true : false; // Change this line
return (
<div>
<button onClick={this.handleClick}>Play Again</button>
{/* Change code below this line */}
<Results fiftyFifty ={expression}/>
{/* Change code above this line */}
<p>{'Turn: ' + this.state.counter}</p>
</div>
);
}
}
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.4 Mobile/15E148 Safari/604.1
Challenge: React - Render Conditionally from Props
The task is to update count by 1 which is this part here
No.2:
This isn’t supposed to be 5 here
Re read the directions more carefully again to fix that mistake
Directions:
This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression.
