2D array in React Native

Question

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

are you getting the data from api response or stored locally? — Mayank Shukla
– Mayank Shukla, Commented Aug 9, 2017 at 6:46
can you show the parent component why from where you are passing the data? because you are using this.props.data that means parent should pass data in the props. — Mayank Shukla
– Mayank Shukla, Commented Aug 9, 2017 at 6:47

Mayank Shukla · Accepted Answer · 2017-08-09 07:02:46Z

4

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(
        ....
    )
}

edited Aug 9, 2017 at 7:02

answered Aug 9, 2017 at 7:00

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Collectives™ on Stack Overflow

2D array in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related