CODEWITHSUNDEEP
javascriptapireact-native
Intern 2
Intern 2

Reputation: 25

React Native: I getting raw data in display page

I'm trying to display staff_name in my dashboard page. The data is displaying but it's displaying raw. Can I know how to solve it.

API code(fetch URL)

            method: 'GET',
            headers: {
                'Authorization': 'Bearer '+ token,

            }
        })
        .then(response => response.json())
        .then((json) => {
            //  alert(json)
            if (json.error) {
                alert(json.error);
            } else {
                this.setState({
                    staffLeave: json.data,
                    isLoading: false
                });


            }

        })
        .catch((err) => {
            console.log(err)
            alert(err)
            // alert(strings.data_fail);
        })
    this.setState({ view_access: true })


    }

API Result that i checked in POSTMAN enter image description here

Rendering Data

 {this.state.view_access == false
                            ? <NoAccessScreen></NoAccessScreen>
                            : this.state.isLoading
                                ? <View style={[components.alignCenter, components.justifyCenter, components.pad_10]} >
                                    <ActivityIndicator />
                                </View>
                                : <FlatList
                                    data={this.state.staffLeave}
                                    renderItem={({ item, index }) =>
                                        this.state.text == null || item.staff_name.toLowerCase().includes(this.state.text.toLowerCase())
                                            ? (this.state.Startdate == null || Moment(Moment(item.date_from, "YYYY-MM-DD").startOf('day')).isSameOrAfter(Moment(this.state.Startdate, "YYYY-MM-DD"), 'day')) &&
                                                (this.state.Enddate == null || Moment(Moment(item.date_to, "YYYY-MM-DD").startOf('day')).isBefore(Moment(this.state.Enddate, "YYYY-MM-DD"), 'day'))
                                                ? <TouchableOpacity style={[components.flatview, { marginTop: 5 }]} onPress={() => navigate('LeaveDetailScreen', { id: item.id })}>
                                                    <View style={[components.listContainer]}  >
                                                        <View style={components.cardContainer}>

                                                            <View style={[components.dotContainer]} >
                                                                <View style={[components.flex_row, components.justifyAlignStart, { padding: 5 }]}>
                                                                    <View style={{ width: '75%' }}>
                                                                        {
                                                                            item.staff_name != null
                                                                                ? <Text style={[components.titleTextStyle]}>{item.staff_name}</Text>
                                                                                : null
                                                                        }
                                                                    </View>
                                                                    {
                                                                        item.date_from != null
                                                                            ? <View style={{ width: '25%' }}>
                                                                                <Text style={[components.titleTextStyle, { fontSize: 13 }]}>{Moment(item.date_from).format("D MMM YYYY")}</Text>
                                                                            </View>
                                                                            : null
                                                                    }

                                                                </View>
                                                            </View>

                                                        </View>
                                                    </View>
                                                </TouchableOpacity>
                                                : null
                                            : null

                                    }
                                    keyExtractor={(item, index) => index.toString()}
                                    extraData={this.state}
                                    nestedScrollEnabled={true}
                                />
                        }

The output is

enter image description here

Upvotes: 0

Views: 846

Answers (2)

Harish Jangra
Harish Jangra

Reputation: 401

First of all why are you getting the whole component from api this is not the suggested pattern. You cannot render html inside react-native if you pass string to component it will treat it as string only not any component

You can get props like url , type etc from the api and render the component youself in react-native with all business logic in component only

Upvotes: 0

1pulsif
1pulsif

Reputation: 499

have you try to use WebView instead of Text something like this :

<WebView style={[components.titleTextStyle]} html={item.staff_name}/>

https://reactnative.dev/docs/webview.html#html

Upvotes: 2

Related Questions