Display variable inside my render React Native

Question

I was trying to display data from a fetch function to my render app in react native.

I was able to get the data from my fetch but i am not able to display it on the app..

this is my code:

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


export default function App() {

const fetchDatos = async () => {
    return fetch('http://localhost:8000/api/consulta').then(response => {
      return response.json();
  })
  .then(responseJson => {
    var Nombre = responseJson.Participante.InfoParticipante['@attributes'].Nombre;
  });
}

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

}

As you can see in the code above I get the data stored in the var ''Nombre'' and I am trying the display it in the app but it's telling me Uncaught ReferenceError: Nombre is not defined

Does anyone know how to fix this, I would appreciate it a lot!

scope of var Nombre is within the fetchDatos funciton. you need to use state variable for that — Prakash Reddy Potlapadu
– Prakash Reddy Potlapadu, Commented Mar 13, 2020 at 20:11
Use this - robinwieruch.de/react-hooks-fetch-data - the answers below don't really cover all cases so you will most likely run into issues. — goto
– goto, Commented Mar 13, 2020 at 20:23

Prakash Reddy Potlapadu · Accepted Answer · 2020-03-13 20:17:06Z

1

This will work

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


export default function App() {

const [nombre,setNombre]=useState()
const fetchDatos = () => {
    return fetch('http://localhost:8000/api/consulta').then(response => {
      return response.json();
  })
  .then(responseJson => {
    setNombre(responseJson.Participante.InfoParticipante['@attributes'].Nombre);
  });
}

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

}

answered Mar 13, 2020 at 20:17

Prakash Reddy Potlapadu

1,0111 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BetoIGM Over a year ago

GREAT! this worked @Prakash Reddy Potlapadu :D, just needed to fix this line: const [nombre,setNombre]= React.useState('');

Prakash Reddy Potlapadu Over a year ago

@BetolGM I imported useState in the first line

Collectives™ on Stack Overflow

Display variable inside my render React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related