逻辑语句中的 react-native state 变量不起作用

Question

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>);
    }
  }
}

Answer 1

Since your count is inside your state, you should change the if statement to:

if(this.state.count<4){

Answer 2

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.