CODEWITHSUNDEEP
javascriptreactjsreact-native
noa-dev
noa-dev

Reputation: 3641

React native mapping through array with object childs - working different as in react web?

I have this array which contains objects:

var tmp_array = [
 { headline: "Test", text: "Test text", send_at: "test date" }
];

Now in the web react environment I was able to map through this array and return its values to a variable which can then be rendered.

So I used the same approach:

    var i = -1;
    var WholeNews = tmp_array.map(function(news){
      i++;
      return(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

After the mapping has finished it should be rendered as following:

return(
  <View>
     {WholeNews}
  </View>
);

Unfortunately I receive a warning in my iOS Simulator which says:

Objects are not valid as a React child(found: object with keys {WholeNews}). If you meant to render a collection of children, use an array instead or wrap the object using createFrament(object) from the React-addons.

I am not sure whether I am missing out something completely or react native simply doesn't support a mapping through an array as in my example.

Upvotes: 17

Views: 57954

Answers (2)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try forEach method instead of map:

   var WholeNews =[];
   tmp_array.forEach(function(news, i){
      WholeNews.push(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

And note from where you can get the i index..

Upvotes: 2

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

This should work:

WholeNews() {
  return tmp_array.map(function(news, i){
    return(
      <View key={i}>
        <Text>{news.headline}</Text>
        <View>
          <Text>{news.text}</Text>
        </View>
      </View>
    );
  });
}

render() {
  return(
    <View>
      {this.WholeNews()}
    </View>
  )
}

Upvotes: 41

Related Questions