CODEWITHSUNDEEP
reactjsreact-native
RD3
RD3

Reputation: 25

Function not firing inside render in React Native

I'm still fairly new to React Native but I am stuck on this simple issue.

I am making an API call in the ComponentWillMount lifecycle method, adding the API data to component state (not using Redux), then mapping over the state to render the data.

When I put my function code in the "render" section it outputs correctly, however when I put the code into a function and call the function inside the render area, nothing is displayed.

Relevant code below:

// function that is not executing
renderAlbums() {
    this.state.albums.map(album=><Text>{album.title}</Text>)
}

render() {

    return (
        <View>
            //this code works correctly
            /*this.state.albums.map(album=><Text>{album.title}</Text>)*/               

           //nothing is being displayed 
           {this.renderAlbums()}
        </View>
    )
}

Any help would be greatly appreciated. Thanks.

Upvotes: 0

Views: 79

Answers (1)

Byron
Byron

Reputation: 1143

you need to return the results of the map function in your renderAlbums function like this:

renderAlbums() {
    return this.state.albums.map(album=><Text>{album.title}</Text>)
}

Upvotes: 1

Related Questions