0

I'm trying to get some specific data to appear within some tags but it does NOT show. However, when I console.log the same data that I'm trying to get in the Text tags, I can see it.

Here is my code

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

import { NavigationActions } from 'react-navigation';
import { Header } from '../common';
import Config from '../Config';

export default class Costco extends Component {
    constructor() {
        super();
        this.state = {
            stores: [],
        };
    }
    componentWillMount() {
        const obj = Config.costcoThree;
        const costcoArr = Object.values(obj);

        this.setState({
            stores: costcoArr,
        })
    }

    renderStores(item) {
        const navigate = this.props.navigation;
        console.log(item.branchName);
        return (
            <Text>{item.branchName}</Text>
        );
    }
    render(){
        return(

            <View>

                <Header headerText="Costco"/>
                <Text>Hello</Text>
                <FlatList
                    data={this.state.stores}
                    renderItem={({item}) => {
                        this.renderStores(item)
                        //return<Text>{item.branchName}</Text>
                    }}
                    keyExtractor={(item) => item.id}
                />
            </View>

        )
    }
}

I've tried rendering Text two different ways. The first, was by returning the data between Text tags within the renderItem method. This worked perfectly. However, when I attempt to return the function renderStores, I am not able to see the Text appear. But the data does appear when I console.log it.

VK1
  • 1,676
  • 4
  • 28
  • 51

1 Answers1

2

as a short answer you need to add return this.renderStores(item) in your renderItem method of FlatList.

if you are using curly braces {} in your function it will not return anything unless you explicitly add return statement in that.

for another workaround you can remove the curly braces and it will automatically return your this.renderStores(item) method.

If you need any example please let me know

th3g3ntl3m3n
  • 151
  • 7
  • Awesome. Thanks a bunch for your help! – VK1 Feb 22 '18 at 06:17
  • Hey..is there any chance you could take a look at this question? https://stackoverflow.com/questions/48925487/state-does-not-change-until-the-second-button-press-adding-a-call-back-throws-a?noredirect=1#comment84857919_48925487 – VK1 Feb 23 '18 at 03:52