React Native - Is not a function - Is Undefined

Question

I have the following code in React Native

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  Image,
  ScrollView
} from "react-native";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      apiData: [],
    };
    this.getButton();
  }

  deleteButton(Id){
    fetch("http://192.168.2.22:9090/usuario/" + (Id), {
      method: "DELETE"
    })
      .then(responseData => {
        console.log(responseData.rows);
      })
      .done();
    this.dataId = null;
  }

  render() {
    const data = this.state.apiData;
    let dataDisplay = data.map(function(jsonData) {
      return (
        <View style={styles.lista} key={jsonData.id}>
          <View style={styles.bordeLista}>
            <View style={styles.fila}>
              <View style={styles.contenedorfoto}>
                <Image
                  style={styles.foto}
                  source={require("./img/login.png")}
                />
              </View>
              <View style={styles.datos}>
                <Text>Nombre: {jsonData.nombre}</Text>
                <Text>E-mail: {jsonData.email}</Text>
                <Text>Telefono: {jsonData.telefono}</Text>
              </View>
            </View>
            <View style={styles.fila}>
              <View style={styles.contenedorboton}>
                <View style={styles.botoniz}>
                  <Button title="Modificar" onPress={() => {}} />
                </View>
                <View style={styles.botonde}>
                  <Button
                    title="Eliminar"
                    onPress={() => this.deleteButton(jsonData.Id)}
                    color="#ee4c4c"
                  />
                </View>
              </View>
            </View>
          </View>
        </View>
      );
    });
    return (
        <Text style={styles.titulo}>Usuarios desde BD MySQL</Text>
        
        <ScrollView>
          <View>{dataDisplay}</View>
        </ScrollView>
      </View>
    );
  }
}

And I want to call deleteButton() from this button

<Button
   title="Eliminar"
   onPress={() => this.deleteButton(jsonData.Id)}
   color="#ee4c4c"
/>

But I get the following error, That the method is not a function and that it is not defined.

Error

How could I use the function? And I'm setting the parameter well (id). Thank you.

PS: I have deleted parts of the code and only left the most important, if you need the full code I can provide it

Answer 1

You're losing the reference to this because you're using an old-style lambda.

Replace this

data.map(function(jsonData) {

with an arrow function, like this

data.map(jsonData => {