CODEWITHSUNDEEP
reactjsreact-native
bip-bop
bip-bop

Reputation: 1321

2D array in React Native

I tried to create 2-D array with React Native and when I try to launch this page I receive error:

undefined is not an object (evaluating "rows.map")

Maybe I have mistake when I parse my array, but I don't know what exactly is not correct. Code is below:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { TopSum, BottomSum, TitleLedger } from '../common/text';
import styles from './style


const data = [{
  "date":"Jul 1, 2016",
  "sum": "$2,577.51",
  "source": "Earnings",
  "total": "$0.14"
},{
  "date":"Jul 1, 2016",
  "sum": "$2,577.51",
  "source": "Earnings",
  "total": "$0.14"
}];


export default class Details extends Component {
  state = {};
  render() {
    const rows = this.props.data;
    const dataRow = rows.map(row => {
            return (
              <View style={styles.operation}>
                <View style={styles.topSum}>
                  <TopSum label={row.date} />
                  <TopSum label={row.sum} />
                </View>
                <View style={styles.bottomSum}>
                  <BottomSum label={row.source} />
                  <BottomSum label={row.total} />
                </View>
              </View>
            )
          })
    return (              
         <View title="BALANCE" style={styles.content}>
          {dataRow}
         </View>      
    );
  }
}

Upvotes: 0

Views: 4412

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104479

Issue is you are using this.props.data that means Details component is expecting the data from parent component in props and you are not passing any data in props so this.props.data will be undefined and it's throwing the error when you are trying to use map on it.

Since you defined the data in the same file in the starting so it will be directly available by data not by this.props.data.

Write it like this:

render() {

    const rows = data;      //here

    const dataRow = rows.map(row => {
        ....
    }

    return(
        ....
    )
}

Upvotes: 4

Related Questions