React Native Render error missing semicolon

Question

I am new to React Native and I was trying to display an ActivityIndicator when my fetch function is loading. I was looking how to implement it and I think I need to use Render(){} function but it showing me and error of semicolon

this is my code so far:

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


export default function App() {


    this.state = {
      isLoading: true,
    }
  


  const [nombre,setNombre]= React.useState('');

  const fetchDatos = async () => {
    return fetch('http://localhost:8000/api/consulta', {method: 'POST', headers: new Headers({'Accept': 'application/json',
         'Content-Type': 'application/json',

       }),       body: JSON.stringify({
         codigoParticipante: '1520',
         contrato: '135927',
      })}).then(response => {
      return response.json();
})
  .then(responseJson => {

          if(responseJson.Participante['@attributes'].Cod == 1){
          switch (responseJson.Participante.Status.Codigos['@attributes'].Codigo) {
            case '400':
              alert(responseJson.Participante.Status.Codigos['@attributes'].Error);
              break;
              case '300':
                alert(responseJson.Participante.Status.Codigos['@attributes'].Error);
                break;
            default:
              console.log('Error interno');
              break;
          }
    }else{
      this.setState({ isLoading: false })
      setNombre(responseJson.Participante.InfoParticipante['@attributes'].Nombre);
  }}).catch(function() {
    alert("No es posible conectar con el servidor.");
  });
} 
  render(){
    const { isLoading} = this.state;
  
  return (
    <View>
    <Button 
      title='press me'
      onPress={fetchDatos}
    />
    <Text>{nombre}</Text>
    </View>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Do someone know what I am doing wrong? I will appreciate it a lot!

Answer 1

You mixed up class base component and functional component.

This is functional component:

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

export default function App() {
    const [loading, setLoading] = React.useState(true);
    const [nombre, setNombre] = React.useState("");

    const fetchDatos = async () => {
        return fetch("http://localhost:8000/api/consulta", {
            method: "POST",
            headers: new Headers({ Accept: "application/json", "Content-Type": "application/json" }),
            body: JSON.stringify({
                codigoParticipante: "1520",
                contrato: "135927"
            })
        })
            .then(response => {
                return response.json();
            })
            .then(responseJson => {
                if (responseJson.Participante["@attributes"].Cod == 1) {
                    switch (responseJson.Participante.Status.Codigos["@attributes"].Codigo) {
                        case "400":
                            alert(responseJson.Participante.Status.Codigos["@attributes"].Error);
                            break;
                        case "300":
                            alert(responseJson.Participante.Status.Codigos["@attributes"].Error);
                            break;
                        default:
                            console.log("Error interno");
                            break;
                    }
                } else {
                    this.setState({ isLoading: false });
                    setNombre(responseJson.Participante.InfoParticipante["@attributes"].Nombre);
                }
            })
            .catch(function() {
                alert("No es posible conectar con el servidor.");
            });
    };

    return (
        <View>
            <Button title="press me" onPress={fetchDatos} />
            <Text>{nombre}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center"
    }
});

In functional component there is no render method and you have to define state with useState so this.state not work.

and also coponent is not correct.