React Native Cant Find Variable simple error

Question

Im new to react native so excuse me if this is a stupid question, but im following a tutorial and ive been editing my App.js, and im at the point off making a tempData.js file, i have coded it too display the list title that is written in tempData to display on the screen, but it does not work, i dont know if its a problem with how ive written my code or format etc, the error code is at the end of the question

App.js Code -

import { StatusBar } from 'expo-status-bar';
import React from 'react';{ StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Flastlist,
  FlatList,
  } from 'react-native';
import {AntDesign} from '@expo/vector-icons';
import tempData from './tempData';

export default class App extends React.Component { render() {

return (
  <View style={styles.container}>
    <View style={{flexDirection: "row"}}>

      <View style={styles.divider} />
      <Text style={styles.title}>
        ToDo <Text style={{fontWeight: "300", color: '#24A6D9'}}>Lists</Text>
      </Text>
      <View style={styles.divider} />
    </View>

    <View style={{marginVertical: 48}}>
      <TouchableOpacity style={styles.addList}>
        <AntDesign name="plus" size={16} color={'#24A6D9'} />
      </TouchableOpacity>

      <Text style={styles.add}>Add List</Text>
    </View>

    <View style={{height: 275, paddingLeft: 32}}>
      <FlatList
        data={tempData}
        keyExtractor={item => item.name}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
          </View>

        )}

      />

    </View>
  </View>
);

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  divider: {
    backgroundColor: '#A7CBD9',
    height: 1,
    flex: 1,
    alignSelf: 'center',
  },
  title: {
    fontSize: 38,
    fontWeight: "800",
    color: '#2D3436',
    paddingHorizontal: 40,
  },
  addList: {
    borderWidth: 2,
    borderColor: '#A7CBD9',
    borderRadius: 4,
    padding: 16,
    alignItems: "center",
    justifyContent: "center",
  },
  add: {
    color: '#24A6D9',
    fontWeight: "600",
    fontSize: 14,
    marginTop: 8,
  },

});

tempData.js code-

export default tempData = [

{
    name: "Plan A Trip",
    color: "#24A6D9",
    todos: [

        {
            title: "Book Flight",
            completed: false
        },
        {
            title: "Passport Check",
            completed: false
        },
        {
            title: "Hotel Room Check",
            completed: true
        },
        {
            title: "Pack Luggage",
            completed: true
        }
    ]
},
{
    name: "Shopping List",
    color: "#8022D9",
    todos: [
        {
            title: "Buy Milk",
            complete: false
        },
        {
            title: "Buy Chocolate",
            completed: true
        }
    ]
},
{
    name: "School Work",
    color: "#A7CBD9",
    todos: [
        {
            title: "Geography 12 marker",
            completed: false
        }
    ]
}

]

The error when i save in tempData.js using expo is 'Cant find Variable: tempData' and no error when i run App.js but its meant to display the list names on the main screen

Answer 1

you can try export const tempData like below code:

export const tempData = [
  {
    name: 'Plan A Trip',
    color: '#24A6D9',
    todos: [
      {
        title: 'Book Flight',
        completed: false
      },
      {
        title: 'Passport Check',
        completed: false
      },
      {
        title: 'Hotel Room Check',
        completed: true
      },
      {
        title: 'Pack Luggage',
        completed: true
      }
    ]
  },
  {
    name: 'Shopping List',
    color: '#8022D9',
    todos: [
      {
        title: 'Buy Milk',
        complete: false
      },
      {
        title: 'Buy Chocolate',
        completed: true
      }
    ]
  },
  {
    name: 'School Work',
    color: '#A7CBD9',
    todos: [
      {
        title: 'Geography 12 marker',
        completed: false
      }
    ]
  }
]

Answer 2

You shouldn't use export default tempData = [] instead you can use

let tempData; export default tempData = [];

this

export default []

or

   const variable = [];
   export default variable;

With default exportation, you don't have to name the variable at all; If you want to use the export, you can basically use

1. const variable = [];
   const variable1 = [];
   export variable
   export {variable as newNameForVariable};
   

2. const variable = [];
   const variable1 = [];
   const exportable = {variable,variable1};
   export * from exportable;