CODEWITHSUNDEEP
react-native
Francisco Soares
Francisco Soares

Reputation: 189

List of components empty

I'm trying to create a view that shows a list of a custom component. It is pretty basic, but the list empty after loading of the component.

The component is defined as below.

import React, { Component } from "react";
import { Text, View, Image } from 'react-native';
import { Container, Icon } from 'native-base';

export default class PlaceVoting extends Component {
    render() {
      return(
        <Container>
          <View style={{ flex: 1,flexDirection: 'row',justifyContent: 'space-between', paddingLeft: 20, paddingRight: 20 }}>
            <View>
                <Text style={{ fontSize: 17 }}>{ this.props.name }</Text>
            </View>
            <View>
                { this.props.voted ? <Icon name='star' style={{ color: 'yellow',fontSize: 17 }} /> : <Icon name='star-outline' style={{ color: 'yellow',fontSize: 17 }} />}
            </View>              
          </View>
        </Container>
      )
    }
  }

The data is received as an array.

import React, { Component } from "react";
import { Text, View, Image } from 'react-native';
import { TouchableNativeFeedback } from 'react-native';
import { Container } from 'native-base';
import PlaceVoting from '../PlaceVoting';

export default class PlaceVotingList extends Component {
    render() {
        {
            return (
                <Container>
                    <View>
                        {
                            this.props.places.map((place) => {
                                <PlaceVoting key={place.id} name={place.name} voted={place.voted} />
                            })
                        }
                    </View>
                </Container>
            )
        }     
    }
  }

I'm developing that with Storybook, and previewing my story with that code.

storiesOf('Place Voting List', module)
  .add('Not Empty', () =>
    (
        <PlaceVotingList 
            places={[ 
                { id: 1, name: 'Teste 1', voted: true }, 
                { id: 2, name: 'Teste 2', voted: false }, 
                { id: 3, name: 'Teste 3', voted: false } 
            ]} />
    ),
  )

Apparently, it is correct. I can see through the debug that the values are received correctly in the render function.

Debug

Unfortunately, at the end of the render function the screen is empty, and I have no idea of why.

Any help will be appreciated!

Upvotes: 1

Views: 154

Answers (1)

iambinodstha
iambinodstha

Reputation: 1007

you need to return your component after mapping your array. i think this will work.

<Container>
<View>
  {
   this.props.places.map((place) => {
    return <PlaceVoting key={place.id} name={place.name} voted={place.voted} />
   })
  }
</View>
</Container>

Upvotes: 2

Related Questions