CODEWITHSUNDEEP
reactjsreact-native
AouxWoux
AouxWoux

Reputation: 71

React native: TypeError: undefined is not a function (near '...data.map...') on building a simple app

So, I was building a simple mobile application on react native. On my history page, I built a table using the react-native-table-component library, and on pressing the column of the table, it would redirect the user to a page called 'test'.

But whenever I try to run the app, it always shows "TypeError: undefined is not a function (near '...data.map...')"

Can anybody please help? I have uploaded the code for reference.

HistoryScreen code:

 import *as React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';
import { useState } from 'react/cjs/react.development';
import { NavigationContainer, TabActions} from '@react-navigation/native';
import test from './test';
import HomeScreen from './HomeScreen';


const tableData={
    tableHead: ['Incident Report'],
    tableData: [
         ['Incident#1'],
         ['Incident#2'],
    ],
};
const styles=StyleSheet.create({
    container: {flex: 1, padding: 10, justifyContent:'center', backgroundColor:'#fff'},
    head: { height: 44, backgroundColor: 'darkblue' },
    headText: { fontSize: 20, fontWeight: 'bold' , textAlign: 'center', color: 'white' },
    text: { margin: 6, fontSize: 16, fontWeight: 'bold' , textAlign: 'center' },
});
export default function HistoryScreen({navigation}){
    const [data, setData] = useState(tableData);

    return(
        <View style={styles.container}>
            <Table borderStyle={{borderWidth: 4,borderColor: 'teal'}}>
                <Rows onPress={()=> navigation.navigate('HomeScreen')} data={data.tableHead} style={styles.head} textStyle={styles.headText}/> 
                <Rows data={data.tableData} textStyle={styles.text}/>
             </Table>
        </View>
    );
}

homepage code

import * as React from 'react';
import {View, Text} from 'react-native';

export default function test(){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> test </Text>
        </View>
    );
}

import * as React from 'react';
import {View, Text} from 'react-native';

export default function HomeScreen( {navigation} ){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
            <Text
                onPress={()=> alert('This is the "Home" Screen')}
                style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> test test</Text>
        </View>
    );
}

Upvotes: 0

Views: 1208

Answers (1)

jted95
jted95

Reputation: 1144

The problem most likely comes from your HistoryScreen code. This is the part where the error come from.

<Rows onPress={()=> navigation.navigate('HomeScreen')} data={data.tableHead} style={styles.head} textStyle={styles.headText}/>

If you see carefully in your import there are two different components called Row and Rows. From what I saw in the docs, it seems to take two different data shape. Row takes an array and Rows takes an array within array.

This is what your code supposed to look like:

...
        <Table borderStyle={{ borderWidth: 4, borderColor: 'teal' }}>
          <Row
            onPress={() => navigation.navigate('HomeScreen')}
            data={data.tableHead}
            style={styles.head}
            textStyle={styles.headText}
          />
          <Rows data={data.tableData} textStyle={styles.text} />
        </Table>
...

Upvotes: 1

Related Questions