0

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.

1 Answer 1

1

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.

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

1 Comment

Thank you. What a typo mistake.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.