Why values are not appearing on pressing button

Question

I'm making an app that gives original value of gyroscope plus the filtered value. I'm using two filters in my code one is named as simple and other one is named as filter . I want to make buttons for both filters and want the filtered values appeared whenever button is clicked. But in my code values of just one filter is appearing at a time without any click. Button are appearing but they do not work. Code is attached below:

import React from 'react';
import { Gyroscope } from 'expo-sensors';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';


export default class GyroscopeSensor extends React.Component {
  state = {
    gyroscopeData: {},
    dataArr:[],
    simpleData:[],

  };

  componentDidMount() {
    this.available();
    this._toggle();
  }

  componentWillUnmount() {
    this._unsubscribe();
  }
  // componentWillUpdate(){
  //   this.filter(this.state.dataArr,20);
  // }
  _toggle = () => {
    if (this._subscription) {
      this._unsubscribe();
    } else {
      this._subscribe();
    }
  };

  _slow = () => {
    Gyroscope.setUpdateInterval(2000);
  };

  _fast = () => {
    Gyroscope.setUpdateInterval(16);
  };

  _subscribe = () => {
    this._subscription = Gyroscope.addListener(result => {
      this.setState({ gyroscopeData: result });
    });
  };

  _unsubscribe = () => {
    this._subscription && this._subscription.remove();
    this._subscription = null;
  };
 available=async()=>{
    check=await Gyroscope.isAvailableAsync()
    console.log(check)
 }


 filter=( values )=>{

  var value = values[0]; // start with the first input
  for (var i=1; i<values.length; ++i){
    var currentValue = values[i];

    value += (currentValue - value) / 20;
    values[i] = round(value);
  }}

  simple = (valx) => {
    // for (var a=1; a<valx.length; ++a){
      if(this.state.simpleData.length<=15){
        // var simpleValue = valx[a];

        if (valx < 0.05 && valx > -0.05){
          this.state.simpleData.push(0)}
        else this.state.simpleData.push(valx)
        // valx[a]= simpleData;

      // }
    }
  }


  render() {
    let {x,y,z}=this.state.gyroscopeData;
    if(this.state.dataArr.length<=10){
    this.state.dataArr.push(round(x))}
    else this.state.dataArr=[]


    return (
      <View style={styles.sensor}>
        <Text>Gyroscope:</Text>
        <Text>
          x: {round(x)} y: {round(y)} z: {round(z)}
        </Text>
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={this._toggle} style={styles.button}>
            <Text>Toggle</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
            <Text>Slow</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._fast} style={styles.button}>
            <Text>Fast</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.filter(this.state.dataArr)} style={styles.button}>
            <Text>Filter</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.simple(round(x))} style={styles.button}>

            <Text>Simple</Text>
          </TouchableOpacity>
          {/* {this.state.simpleData.map((val)=><Text>{val}</Text>)}  */}
          {this.state.dataArr.map((val1)=><Text>{val1}</Text>)}


        </View>
      </View>
    );
  }
}

function round(n) {
  if (!n) {
    return 0;
  }

  return Math.floor(n * 100) / 100;
}

// LPF.smoothing = 0.5;
// var values = [gyroscopeData];
// LPF.smoothArray(values)
// // RESULT: [10,9,9,10,11,9,30,20,16,12]

// // Stream
// LPF.smoothing = 0.2;
// LPF.init([gyroscopeData]);
// LPF.next(20); // around 12.0
// LPF.next(10); // around 10.3


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonContainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#eee',
    padding: 20,
  // },
  // middleButton: {
  //   borderLeftWidth: 1,
  //   borderRightWidth: 1,
  //   borderColor: '#ccc',
  },
  sensor: {
    marginTop: 30,
    paddingHorizontal: 10,
  },
});

Answer 1

It's because you are using the following which is calling the function as soon as the component is rendered:

onPress={this.filter(this.state.dataArr)}

Change it to something like this which will only trigger this.filter when the button is pressed:

onPress={() => {this.filter(this.state.dataArr)}}