I want to render click button only when the count is less than 4, otherwise print "helo there". The variable count is a state variable with value zero initially; which increments as button is clicked. But the output is "helo there" only though count is zero.. Why it is so...??
import * as React from 'react';
import {Component} from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
if(this.props.count<4){
return (
<View>
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
</View>
);
}
else
{
return(<View><Text>{this.state.count}</Text></View>);
}
}
}
Since your count
is inside your state, you should change the if statement to:
if(this.state.count<4){
you are using this.props.count, instead of props.count, use this.state.count<4
in if statement. props are used to get properties from parent component.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.