I am trying to create a mobile lock screen with numbers to user for entering the pincode. when the user press the number buttons values should be entered to the array that I have created. when the numbers are entered, a style property is changed.

here is the code

import React from "react";
import { Alert, StyleSheet, Text, Touchable, TouchableHighlight, TouchableOpacity,useState, View } from "react-native";
import Loading from './Loading';

const Buttons = () => {
    this.state = {
      passcode: ['','','','']
    }
    _presControl = num =>{
      let tempCode = this.state.passcode;
      for(var i = 0; i<tempCode.length;i  ){
        if(tempCode[i] == ''){
          tempCode[i] = num;
          break;
        }else{
          continue;
        }
      }
      this.setState({passcode:tempCode});
    };
    let nopad = [
      {id:1},
      {id:2},
      {id:3},
      {id:4},
      {id:5},
      {id:6},
      {id:7},
      {id:8},
      {id:9},
      {id:0}
    ]; 
    return(
        <View >
        <View style={styles.boxcontaner} >
        {this.state.passcode.map(p =>{
          let style= p !=''? styles.box2:styles.box1;
          return  <View style={style}></View>
        })}       
        </View>
            <View style={styles.noBox}>
            {nopad.map(num =>{
              return(
                        <TouchableOpacity style={styles.box}
                           key={num.id}
                           onPress={this._presControl(num.id)} >
                            <Text style={styles.title}>{num.id}</Text>
                        </TouchableOpacity>
              );
            })}             
            </View>
        </View>
    );
}

const styles = StyleSheet.create({

    box1: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray'
  },
  box2: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray',
    backgroundColor:'red'
  },
  box: {
    width:70,
    height:70,
    borderRadius:70,
    borderWidth:1,
    borderColor:'#F2F3F4',
    alignItems:'center',
    backgroundColor:'#F2F3F4',
    justifyContent:'center',
    alignItems:'center'

  },

  boxcontaner:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    marginLeft:40,
    marginRight:40,
    marginTop:10,
  },
  noBox:{
    alignItems:'center',
    justifyContent:'center',
    marginTop:100,
    flexDirection:'row',
    flexWrap:'wrap',
    marginLeft:20,
    width:270,
    height:200,
  }
});

export default Buttons;

But when I run the code it says

_this._presControl is not a function. (In '_this._presControl(num.id)', '_this._presControl' is undefined)

what is the error. How can I solve this please ?

CodePudding user response：

Please , can share all your code in sandbox - https://codesandbox.io/s/react-native-q4qymyp2l6?from-embed=&file=/src/App.js , it will be much easier to me help you with all code