Render async fetch response as an element in React-Native?

Question

I have an array of data I'm getting back from an API using fetch. I'm trying to parse and render the json response as elements in my app, however I'm not having any luck, how would I go about fixing my code to render my async data as elements?

class Profile extends React.PureComponent {
    static propTypes = {
    navigation: PropTypes.object,
    handleLogout: PropTypes.func,
    user: PropTypes.object,
  };

  static navigationOptions = {
    headerVisible: true,
    title: 'Profile',
  };

constructor(props) {
    super(props);

    this.state = {
    data: []
    };
  }

componentDidMount() {
fetch("http://10.0.2.2:8080/combined",
{ method: 'get' })
.then(function(response) {
  var data = response.json();
   console.log(data)
   this.setState({ data })

 })
   .catch(function(err) {    }

   );
  };


  logout = () => {
    const callback = () => {
      const resetAction = NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'SignIn' })],
      });
      this.props.navigation.dispatch(resetAction);
    };
    this.props.handleLogout(callback);
  };



  jsonData() {
  return this.state.data.map(function(rows, i){
    return(
      <View key={i}>
        <Text>{rows.FIRSTNAME}</Text>
      </View>
    );
  });
}

  render() {

    const { user } = this.props;
    let email;

    return (
      <ContentWrapper>
        <View style={styles.container}>
          <Image style={styles.header} source={images.profileHeader} />
          <View style={styles.body}>
            <Avatar email={email} style={styles.avatar} />
            <Text style={styles.email}>{_.capitalize(email)}</Text>
            {jsonData()}
            <Button
              title="Log out"
              icon={{ name: 'logout-variant', type: 'material-community' }}
              onPress={this.logout}
              style={styles.logoutButton}
            />
          </View>
        </View>
      </ContentWrapper>
    );
  }


}



export default Profile;

Andreyco · Accepted Answer · 2017-05-16 20:33:54Z

3

Remember, response.json() is asynchronous as well and returns Promise, not data as you expect.

Adjust code responsible for fetching to this and you are good to go...

componentDidMount() {
  fetch("http://10.0.2.2:8080/combined", { method: 'get' })
    .then(response => response.json())
    .then(data => {
      this.setState({ data })
    })
   .catch(function(err) {
     // 
   })
}

answered May 16, 2017 at 20:33

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

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

Comments

Matt Aft · Accepted Answer · 2017-05-16 19:18:31Z

0

You can set it so it only renders if data has a length:

jsonData = () => (this.state.data.length ? this.state.data.map((rows, i) => (
  <View key={i}>
    <Text>{rows.FIRSTNAME}</Text>
  </View>
)) : null)

answered May 16, 2017 at 19:18

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

Render async fetch response as an element in React-Native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related