Question

85

React Native Render error missing semicolon

rated 0 times [ 90] [ 5] / answers: 1 / hits: 9877 / 4 Years ago, fri, may 8, 2020, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Display only one element at a time in react with .map()

Sat, Sep 28, 19, 00:00, 5 Years ago

View All

answered 4 Years ago eden · Accepted Answer

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.