Using map function to go through array of objects to to be rendered in elements

Question

I'm using a package to that allows to render views in a slide.

I am trying to go through each view by creating an an array of objects that include a text and image source string.

I have done it two ways:

creating a this. function in the render() method and calling it inside inside "{this. function}" inside the page element.

&

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { Pages } from 'react-native-pages'

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default class Walkthrough extends Component {
  render() {
    const pages = [{
      text: 'first slide',
      imageSource: './images/hello.png',
    },
    {
      text: 'second slide',
      imageSource: './images/hello.png',
    },
    {
      text: 'third slide',
      imageSource: './images/hello.png',
    }]
    return (
      <Pages>
        { pages.map(([value, index]) => {
          return (
            <View key={index}>
              <Image uri={value.imageSource} />
              <Text> {value.text} </Text>
            </View>
          )
        })}
      </Pages>
    )
  }
}

I continue to get this error: "Invalid attempt to destructure non-iterable instance" relating to babel.

My babel related dependencies:

"devDependencies": {
    "babel-eslint": "^8.0.1",
    "babel-jest": "21.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-preset-react-native": "4.0.0",
 },

JiangangXiong · Accepted Answer · 2017-09-29 03:05:07Z

1

Your usage of array.map make error, it should be array.map(function(arrayItem, index) {}), not [arrayItem, index],

For your code:

return (
  <Pages>
    { pages.map((value, index) => {
      return (
        <View key={index}>
          <Image uri={value.imageSource} />
          <Text> {value.text} </Text>
        </View>
      )
    })}
  </Pages>
)

answered Sep 29, 2017 at 3:05

JiangangXiong

2,4461 gold badge14 silver badges15 bronze badges

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

Comments

FisNaN · Accepted Answer · 2017-09-29 03:04:07Z

0

You access the map function in a wrong way.

<Pages>
{
    pages.map((page, index) => {
        return (
            <View key={index}>
                <Image uri={page.imageSource} />
                <Text> {page.text} </Text>
            </View>
        )
    })
}
</Pages>

The doc for array.map array.map((value, index) => {} );

answered Sep 29, 2017 at 3:04

FisNaN

2,9152 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Using map function to go through array of objects to to be rendered in elements

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