CODEWITHSUNDEEP
jsonreact-nativenative-base
arunkmoury
arunkmoury

Reputation: 7

Native Base component does not render json array map function?

I am loading native base component in a map function while fetching json array. I checked the json array its fetching data. I also checked the data inside map function by printing data to console, its also working. But I dont know why no native base component is rendered inside the map function?

import React, { Component } from 'react';
import { Card, List, ListItem, Thumbnail, Body,Button, Text } from 'native-base';
import { Image } from 'react-native';

export default class CardSection extends Component {
    render() {
        return (
            <Card>
                <List>
                    <ListItem>
                        <Text>FIrst list item</Text>
                    </ListItem>
                </List>
                <List>
                    {
                        this.props.data.map(albumdata => {
                            <ListItem>
                                <Text></Text>{/* not displaying in the simulator */}
                                <Text>{albumdata.title}</Text>{/* not displaying in the simulator */}
                            </ListItem>
                        })
                    }
                </List>
            </Card>
        );
    }
}

Upvotes: 0

Views: 1025

Answers (1)

Vishu Bhardwaj
Vishu Bhardwaj

Reputation: 366

I think I know the problem, you are not returning anything from map function callback. Replace -

albumdata => {
  <ListItem>
   <Text></Text>{/* not displaying in the simulator */}
   <Text>{albumdata.title}</Text>{/* not displaying in the simulator */}
  </ListItem>
}

with

albumdata => {
  return (
    <ListItem>
     <Text></Text>{/* not displaying in the simulator */}
     <Text>{albumdata.title}</Text>{/* not displaying in the simulator */}
    </ListItem>
  );
}

Thanks please inform if this solves your problem.

Upvotes: 4

Related Questions