CODEWITHSUNDEEP
loopsreact-nativeforeach
Tekk
Tekk

Reputation: 317

React Native foreach loop

I'm developing a little app in React Native and I am looking for something like a foreach function. I just can't find a foreach loop. Not on StackOverflow and not even in the docs. I've found something with 'map', but I don't know if this is what I'm looking for.

With a request to my Server I get multiple objects of users. When I log the result, it looks like this:

Object {
    "id": "1",
    "role": "user",
    "username": "user1",
  },
Object {
    "id": "2",
    "role": "admin",
    "username": "user2",

I'd like to output this to a list. In plain PHP I would use a foreach loop for this, but like I said, I can't find a foreach loop for React Native.

How is it possible to loop trought this objects? I know that I could also use a simple for loop, but this would definitly not be my first choice...

EDIT: I saved this value in this.state.users with this.setState({users: responseData.users});. State is defined in my constructor. I try to access this with this.state.users.map(id => <Text>{id}</Text>) but I always get the same error: null is not an object (evaluating 'this.state.users.map'). Am I doing this right?

Upvotes: 15

Views: 117585

Answers (4)

SOULAT TOQEER
SOULAT TOQEER

Reputation: 101

import React, { useContext, useState } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
import BlogContext from "../context/BlogContext";

export default function IndexScreen() {

  const blogPosts = useContext(BlogContext);

  return (
    <View>
      {blogPosts.map((post) => {
        return <Text>{post.title}</Text>;
      })}
    </View>
  );
}

Upvotes: 0

kevinl
kevinl

Reputation: 4214

You can also use lodash (npm install lodash) and run the following:

import _ from 'lodash';

...

_.each(dataList, function(userObject, key) { console.log(userObject, key); });

Upvotes: 0

Jigar Shah
Jigar Shah

Reputation: 6223

You can use map or for-of or any other

Example:

// for of
for (let userObject of this.state.users) {
    console.log(userObject.username);
}
// map
this.state.users.map((userData) => {
    console.log(userData.username);
});

as per the error you may not have data within users state, so you are getting error. If data is proper then above example will work properly

Upvotes: 35

Ozgur
Ozgur

Reputation: 3766

In react, preferred way is map method of Array. Example using ES6 arrow function: 

render() {    
    return (
        <View>    
           {dataList.map(r => <Button>{r}</Button>)}    
        </View>
    )
}

Upvotes: 15

Related Questions