nested data with react-native elements

Question

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

Umair Farooq · Accepted Answer · 2019-01-22 10:09:30Z

1

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';

answered Jan 22, 2019 at 10:09

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nested data with react-native elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related