Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138221

I cannot display text using array and import method

$
0
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.


Viewing all articles
Browse latest Browse all 138221

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>