Nothing is rendering on screen. No clue why its happening, No error anywhere. Wondering why nothing is showing on screen. Getting data from API properly. Code is given below:

import React, { Component } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text, View } from 'react-native';
import { Container, Content, Grid, Row, Col } from 'native-base';
import axios from 'axios';
import ItemCard  from '../ponents/ItemCard';

export default class ItemHorizontalScreen  extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: []
        }
    }

    ponentWillMount() {
        axios.get('').then(response => 
            this.setState({
                items: response.data
            }))
        .catch((error) => {
            console.error(error);
        })
    }

    renderHorizontalContents() {
        const rowItems = this.state.items
        rowItems.map((rowItem, index) => {
            return (
                <TouchableOpacity key={index}>
                    <Text>{rowItem.title}</Text>
                </TouchableOpacity>
            )
        })
    } 

    render() {
        return (
            <View>
            {this.renderHorizontalContents()}
            </View>
        )
    }
}

Nothing is rendering on screen. No clue why its happening, No error anywhere. Wondering why nothing is showing on screen. Getting data from API properly. Code is given below:

import React, { Component } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text, View } from 'react-native';
import { Container, Content, Grid, Row, Col } from 'native-base';
import axios from 'axios';
import ItemCard  from '../ponents/ItemCard';

export default class ItemHorizontalScreen  extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: []
        }
    }

    ponentWillMount() {
        axios.get('http://rallycoding.herokuapp./api/music_albums').then(response => 
            this.setState({
                items: response.data
            }))
        .catch((error) => {
            console.error(error);
        })
    }

    renderHorizontalContents() {
        const rowItems = this.state.items
        rowItems.map((rowItem, index) => {
            return (
                <TouchableOpacity key={index}>
                    <Text>{rowItem.title}</Text>
                </TouchableOpacity>
            )
        })
    } 

    render() {
        return (
            <View>
            {this.renderHorizontalContents()}
            </View>
        )
    }
}

• javascript
• reactjs
• react-native
• axios

Share Improve this question Follow asked Oct 16, 2018 at 13:36 Wahidul AlamWahidul Alam 1,25355 gold badges3131 silver badges6060 bronze badges 2

• 1 you have to return something from your renderHorizontalContents function. use return rowItems.map((rowItem, index) => {...} – Anurag Awasthi Commented Oct 16, 2018 at 13:37
• good catch.. working now .. thanks a lot :) @nrgwsth – Wahidul Alam Commented Oct 16, 2018 at 13:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your renderHorizontalContents() should return the list:

renderHorizontalContents() {
    const rowItems = this.state.items
    return rowItems.map((rowItem, index) => {
        return (
            <TouchableOpacity key={index}>
                <Text>{rowItem.title}</Text>
            </TouchableOpacity>
        )
    })
} 

Also, semi-related, as of React 16.3 React team advises not to use ponentWillMount(). You should fetch the data in ponentDidMount() LifeCycle hook.

More on ponentWillMount() deprecation:

https://github./styled-ponents/styled-ponents/issues/1575

Try this. The issue is renderHorizontalContents() is not returning so you have to return elements which map returns for you

Also regarding adding key, if items array contains unique id per object then use that is as key that is remended. Index is always second option if you don’t have unique id from data. Also when adding index as key you should add something like I did below instead of adding index as key directly.

renderHorizontalContents() {
        const { items } = this.state;
           return items.map((rowItem, index) => {
            return (
                <TouchableOpacity key={"Key"+index}>
                    <Text>{rowItem.title}</Text>
                </TouchableOpacity>
            )
        })
    }