I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below the "Change" and "Change Age" buttons.
The current age is:
I believe I need to incorporate conditional rendering in JSX using the changeBackground function, but I'm not entirely sure how to proceed. Here is my current code snippet:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.changeClicked = this.changeClicked.bind(this);
this.state = {
name: 'jerry',
age: 10
}
}
changeClicked() {
this.setState({name: 'Anne'});
}
changeAge() {
//this.setState({age : this.state.age + 1, name : 'Jacob'})
this.setState((prevState) => ({age: prevState.age + 1}));
console.log("The age is " + this.state.age);
//this.setState({name : 'Maureen'})
}
changeBackground() {
this.setState({backgroundColor: 'red'});
}
render() {
const age = this.state.age;
const color = 'white';
return (
<div>
{
<p style={{color: 'red'}}>name and age information</p>
}
<h3 style={{backgroundColor: color}}>Name is {this.state.name} and age = {age}</h3>
<button onClick={this.changeClicked}>Change</button>
<button onClick={() => this.changeAge()}>Change Age</button>
<p>Current Age: {age}</p>
<div></div>
<Info nimi={this.state.name} address="Europe" />
</div>
)
}
}
export default App;