CODEWITHSUNDEEP
javascriptreact-native
Aashish Sapkota
Aashish Sapkota

Reputation: 59

I cannot display text using array and import method

enter image description here

I don't know what is happening but no text is displaying. Please help if I have implemented the wrong way or things have been changed. Below is the code for my CategoriesScreen.js

import React from'react';
import {View, Text, FlatList, StyleSheet} from 'react-native';

import { CATEGORIES } from '../data/dummy-data';
const renderGridItem =itemData => {
return (
<View style ={styles.gridItem}>
<Text>{itemData.item.title}</Text>   
</View>
); //item in line 9 would be the item defined with this function
};

const CategoriesScreen = props =>{
   return(
    <FlatList
    data={CATEGORIES}
    renderItem={renderGridItem}
     numColumns={2} // numColumn is function that set no of columns - grid view
     />
   );
};

const styles = StyleSheet.create({
screen:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
},
gridItem:{
    flex:1,  //it can get as much space as it can get
    margin:15,
    height:150
}
});

export default CategoriesScreen;

Below would be my code for dummy-data.js //just a dummy data

import Category from '../models/category';

export const CATEGORIES = [
  new Category('c1', 'Italian', '#f5428d'),
  new Category('c2', 'Quick & Easy', '#f54242'),
  new Category('c3', 'Hamburgers', '#f5a442'),
  new Category('c4', 'German', '#f5d142'),
  new Category('c5', 'Light & Lovely', '#368dff'),
  new Category('c6', 'Exotic', '#41d95d'),
  new Category('c7', 'Breakfast', '#9eecff'),
  new Category('c8', 'Asian', '#b9ffb0'),
  new Category('c9', 'French', '#ffc7ff'),
  new Category('c10', 'Summer', '#47fced')
];

And below is my category.js 

// I will set how my data is shaped in this app in this file

class Category {

constructor(id, tittle, color) {
this.id = id;        // with help of this property i will store all data
this.tittle= tittle;  //in this right side constructor (...) has been called
this.color= color;     //this all features belongs to javascript
}
}

export default Category;

Any help and suggestions would be really appreciated. Thank You.

Upvotes: 0

Views: 32

Answers (1)

Joshua Obritsch
Joshua Obritsch

Reputation: 1293

Change this:

<Text>{itemData.item.title}</Text>

To this:

<Text>{itemData.item.tittle}</Text>

Because in your constructor, you call it tittle. Alternatively, you can rename tittle to title. I also don't think you need item, you can just do itemData.tittle I think.

Upvotes: 1

Related Questions