React Native foreach loop

Question

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?

Jigar Shah · Accepted Answer · 2018-05-24 05:56:00Z

35

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

edited May 24, 2018 at 5:56

answered Aug 24, 2017 at 12:55

Jigar Shah

6,2332 gold badges32 silver badges41 bronze badges

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

1 Comment

Swapnil Panchal Over a year ago

getting an error like forEach and i tried to solve out but there is another errors are occured so this can't help but thanks for response

Ozgur · Accepted Answer · 2017-08-24 12:04:04Z

15

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

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

answered Aug 24, 2017 at 12:04

Ozgur

3,76620 silver badges35 bronze badges

1 Comment

Tekk Over a year ago

I get null is not an object (evaluating 'this.state.users.map'). FYI I've also updated my question.

Pragnesh · Accepted Answer · 2019-08-05 14:54:20Z

0

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

import _ from 'lodash';

...

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

edited Aug 5, 2019 at 14:54

Pragnesh

4576 silver badges16 bronze badges

answered Aug 24, 2017 at 17:07

kevinl

4,2026 gold badges39 silver badges55 bronze badges

1 Comment

vhs Over a year ago

This is quite over-engineered.

SOULAT TOQEER · Accepted Answer · 2022-11-01 10:43:59Z

0

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>
  );
}

answered Nov 1, 2022 at 10:43

SOULAT TOQEER

1011 silver badge4 bronze badges

Collectives™ on Stack Overflow

React Native foreach loop

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related