CODEWITHSUNDEEP
react-native
Jack Antico
Jack Antico

Reputation: 41

Console logs only show up once in React Native

I'm trying to get the hang of react native with a very simple app which will log how many times I press a button. Here's my code and my output.

Code:

import React from 'react';
import { View, Text, Button} from 'react-native';

let numOfTimesPressed1 = 0;
let numOfTimesPressed2 = 0;

function printTimesPressed(num) {
  if (num == 1) {
    numOfTimesPressed1 += 1;
    console.log("Log In Button was pressed " + numOfTimesPressed1 + ".");
  } else {
    numOfTimesPressed2 += 1;
    console.log("Log In Button was pressed " + numOfTimesPressed2 + ".");
  }
}

class HomeScreen extends React.Component {

  render() {
    return (
      <View>
        <Text>Page Master</Text>
        <Button
          title="Log In"
          onPress={printTimesPressed(1)}
          >
        </Button>
        <Button
          title="Sign Up"
          onPress={printTimesPressed(2)}
          >
        </Button>
      </View>
    );
  }
}

export default HomeScreen;

Here's my output after I've hit both buttons multiple times:

 LOG  Running "PageMaster" with {"rootTag":1}
 LOG  Log In Button was pressed 1.
 LOG  Log In Button was pressed 1.

Why won't it update?

Upvotes: 0

Views: 1026

Answers (3)

Omair Ahmed
Omair Ahmed

Reputation: 1

First of all, Please declare the variables and functions in class and try to use latest ECMAScript (ES). here is the updated code according to standards, the main issue was the onPress handling, as you are trying using an older ES version it was causing issues and lastly in case of one class export that class directly

import React from 'react';
import { View, Text, Button } from 'react-native';

export default class HomeScreen extends React.Component {
  numOfTimesPressed1 = 0;
  numOfTimesPressed2 = 0;
  render() {
    return (
      <View>
        <Button title="Log In" onPress={()=>this.printTimesPressed(1)} />
        <Button title="Sign Up" onPress={()=>this.printTimesPressed(2)} />
      </View>
    );
  }
  printTimesPressed = (num) => {
    if (num == 1) {
      this.numOfTimesPressed1 += 1;
      console.log('Log In Button was pressed ' + this.numOfTimesPressed1 + '.');
    } else if (num == 2) {
      this.numOfTimesPressed2 += 1;
      console.log('Sign up Button was pressed ' + this.numOfTimesPressed2 + '.');
    }
  }
}

Upvotes: 0

Max
Max

Reputation: 4739

onPress expects a function to be passed. Your code passes not a function but a result of calling printTimesPressed(1), which is undefined

onPress={printTimesPressed(1)} // wrong: printTimesPressed(1) is not a function but a code that returns nothing

What you want is this

onPress={() => printTimesPressed(1)} // () => printTimesPressed(1) is a function

onPress={function() { printTimesPressed(1) }} // same thing

now onPress receives anonymous arrow function that will, when executed (when button is pressed), call printTimesPressed with respective argument

Upvotes: 1

seawave_23
seawave_23

Reputation: 1248

This happens because functions, on which React is based, are stateless. This is a specialty of functional programming. That means, functions cannot count, and will always act exactly the same when passing the exact same param. You will have to save your number elsewhere (e.g. in a state) to count how often a function is called. Here, you can find an example of a React Counter Button: https://wsvincent.com/react-counter/

Upvotes: 0

Related Questions