Iterate an array of objects within renderRow in ListView, React-Native

Question

having the code below, how can I display the various properties on the mobile screen? I'm able to see the array of objects printed out on the console, but I'm not able to use the properties contained in each object in order to display the information on the mobile screen.

import React, { Component } from 'react';
import { AppRegistry, ListView, View, Text } from 'react-native';
import axios from 'axios';

export default class Component5 extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      userDataSource: ds,
    };
  }
  componentDidMount() {
    this.fetchUsers();
  }
  fetchUsers() {
    axios.get('https://stageapi6.devmn.net/api/v1/forums/threads?topic_id=2418', {
      headers: {
        'client-id': '********'
      }
    })
    .then(response => this.setState({ userDataSource: this.state.userDataSource.cloneWithRows(response) }));
  }

  renderRow = (user) => {
    console.log(user); // => [Object, Object, Object, Object .........]

    return (
      <View>
        {/* I need a way to iterate the bojects and display the properties inside teh Text tags, the code below doesn't work */}
        <Text>{user.thread.num_posts}</Text> 
        <Text>{user.thread.topic_name}</Text>
        <Text>{user.thread.name}</Text>
      </View>
    );
  }
    render() {
      return (
        <ListView
          dataSource={this.state.userDataSource}
          renderRow={(user) => this.renderRow(user.threads)}
        />
      );
    }
}

AppRegistry.registerComponent('Component5', () => Component5);

SCREENSHOT OF THE RETURNED ARRAY OF OBJECTS AND ITS PROPERTIES

Panther · Accepted Answer · 2017-04-19 12:11:22Z

2

You need to iterate over the user array and build the jsx on the fly. use something like below

renderRow = (user) => {
 return (
  <View>
    { user.map(u =>
             (<View key={u.thread.id}>
              <Text>{u.thread.num_posts}</Text> 
              <Text>{u.thread.topic_name}</Text>
              <Text>{u.thread.name}</Text>
              <View>));
    }
  </View>
 );
}

answered Apr 19, 2017 at 12:11

Panther

9,5183 gold badges26 silver badges37 bronze badges

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

1 Comment

Alberto Ferioli Over a year ago

thanks for the help, but unfortunately the error in the console is still the same Possible Unhandled Promise Rejection (id: 0): Cannot read property 'map' of undefined. However I can see the iteration in user, but can't spit the properties on the simulator

Chiamaka Nwolisa · Accepted Answer · 2017-04-19 16:13:07Z

0

I can't comment on the previous answer but it should work. If it is giving you the error you posted above which says it Cannot read property 'map' of undefined which goes to show that the user param you are passing into renderRow is not an array or its empty or it has a problem. Focus on solving that part.

I pasted the code snippet for the fetchUsers function into Babel repl and this is what I saw.

It looks like the this you are referencing for the this.state.userDataSource is not the correct this to be referencing.

Hopefully, this helps somehow

answered Apr 19, 2017 at 16:13

Chiamaka Nwolisa

9818 silver badges16 bronze badges

Collectives™ on Stack Overflow

Iterate an array of objects within renderRow in ListView, React-Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related