CODEWITHSUNDEEP
javascriptreactjsreact-native
Feliks Bekeshov
Feliks Bekeshov

Reputation: 115

React Native: I have a question with this React

Can some one help with that please, I tried almost all ways but I can't any mistake or errors: error is Element type is invalid: expected a string or class/function but got undefined. Check the render method of 'App' Here is the code:

import React from 'react';
import { useState } from 'react';
import { Flatlist } from 'react-native';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {

  const[todos, setTodos] = useState([
{      text: 'buy coffee' , key: '1' },

{  text: 'learn Redux', key: '2' },

{ text: 'go to gym' , key: '3' }

  ]);

  return (
    <View style = {styles.container}>

{/*header */}

      <View style = {styles.content}>

        {/* to form */}


        <View style = {styles.list}>

          <Flatlist
          data = {todos}
          renderItem = {( {item} )=> ( 
              <Text>{item.text} </Text>
             )}
          
          />
        </View>
      </View>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {

    flex: 1,
    backgroundColor: '#fff'
  },
  content: {

    padding : 40, 



  }

});

Upvotes: 3

Views: 59

Answers (2)

doBell-DAN
doBell-DAN

Reputation: 21

Flatlist => FlatList

check data is not null or undefined

renderItem = {( {item} )=> (<Text>{item?.text ?? ''} </Text>)}

Upvotes: 2

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You are using the wrong case for letter 'L' for FlatList

Change

import { Flatlist } from 'react-native';

To

import { FlatList } from 'react-native';

Also change

   <FlatList
      data = {todos}
      renderItem = {( {item} )=> ( 
          <Text>{item.text} </Text>
         )}
      
      />

Upvotes: 5

Related Questions