CODEWITHSUNDEEP
reactjsreact-native
developer
developer

Reputation: 229

nested data with react-native elements

I'm trying to display nested data from a container component unto a view component in react native but anytime the page loads an error message is thrown unto the screen

Container

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import WardsScreens from './WardsScreen';

class WardsContainer extends Component{

  state= {
    wardsData:[
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: 'Vice President'
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
      },

    ]
  } 
  render() {
    return (
     <WardsScreens
      displayView = {this.state.wardsData}
     />
    );
  }
}

export default WardsContainer;

View Component

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { List, ListItem } from 'react-native-elements'


const WardsScreens =({displayView})=>(
      <List containerStyle={{marginBottom: 20}}>
      {
        displayView.map((item) => (
          <ListItem
            roundAvatar
            avatar={{uri:item.avatar_url}}
            key={item.name}
            title={item.name}
          />
        ))
      }
    </List>
    )

export default WardsScreens;

But when the page is rendered i get this error

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Any help on how to get this done

Upvotes: 1

Views: 119

Answers (1)

Umair Farooq
Umair Farooq

Reputation: 1823

This error is if component is not export from the file you are importing from. The error might be that you are importing from wrong file(assuming filename be same as your component name)

import WardsScreens from './WardsScreen';

should be 

import WardsScreens from './WardsScreens';

Upvotes: 1

Related Questions