CODEWITHSUNDEEP
javascriptreactjsreact-nativelistitemreact-native-flatlist
Muhammad Ashfaq
Muhammad Ashfaq

Reputation: 2531

React-Native Flatlist is not Rendring due to some error

Flatlist implementing but data is not render properly

App.js

import React, {Component} from 'react';
import Main from './components/MainComponents';
import {Platform} from 'react-native';



const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


export default class App extends Component<Props> {
  render() {
    return (
        <Main />

    );
  }
}

MainComponent.js

import React,{Component} from 'react';
import {Menu} from './MenuComponent';
import { DISHES } from '../shared/dishes';


class Main extends Component{

    constructor(props){
        super(props);
        this.state={
            dishes: DISHES
        }
    }

    render(){
        return(
            <Menu dishes={this.state.dishes} />
        )
    }

}

export default Main

MenuComponent.js

import React,{Component} from 'react';
import {View,Flatlist } from 'react-native';
import {ListItem} from 'react-native-elements';

function Menu(props){


    const renderMenuItem=({item,index}) => {
        return(
            <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{ source: require('./images/images/buffet.png')}}
            />
        )
    }

    return(
        <Flatlist 
        data={props.dishes}
        renderItem={renderMenuItem}
        keyExtractor={item => item.id.toString()}
        />
    )
}

export default Menu

Error

you likely forgot to export your component or eigther you have mixed up default and named imports

I have read all queustions related but doest'nt worked for me Newbiew to react-native

Help will be highly appreaciated

Thanks

Upvotes: 4

Views: 187

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

Since Menu component is default export you can’t import it like {Menu} so

In your MainComponent.js

Change

   import {Menu} from './MenuComponent';

To

   import Menu from './MenuComponent';

Also

Change

import Main from './components/MainComponents';

To

import Main from './components/MainComponent';

Upvotes: 2

Related Questions