React: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

Created on 24 Nov 2019  路  2Comments  路  Source: facebook/react

I'm doing an exercise to understand a little more react native, I'm working FlagtList to show a list but I'm throwing the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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.

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.

Check the render method of `App`.

Stack trace:
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9001:8 in reconcileSingleElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9085:14 in reconcileChildFibers
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11007:6 in reconcileChildren
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11755:4 in updateHostComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17276:21 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
  node_modules/react/cjs/react.development.js:335:31 in setState
  App.js:55:18 in _callee$
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:30 in invoke

The code I am implementing is as follows:

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlagtList } from 'react-native';

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default class App extends Component {

  state = {
    loading: true,
    users: [] // Esto es un arreglo vacio el cual guardara los datos que se trae
  };

  constructor(props) {   
    super(props)
    this.fetchUsers()    
  }

  fetchUsers = async () => {

    const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');

    const pre = await respuesta.json();

    const usersjson = pre.map( x => ({ ...x, key: String(x.id) }));

    this.setState({ users: [usersjson.name], loading: false });

  }

  render() {

    const { loading, users } = this.state;

    if ( loading ) {
      return (
        <View style={ styles.container }>
          <Text>Por Favor espere... </Text>
        </View>
      );
    }

    return <View>
      <FlagtList
        data={ users }
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>;
  }

}

I don't know why I get the error and try to execute the project and I still get the same error.

I'm running it with yarn start.

I appreciate the help you can give me.

Thanks

Most helpful comment

Potentially a typo. Are you meaning to import and use FlatList from react-native?

All 2 comments

Potentially a typo. Are you meaning to import and use FlatList from react-native?

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

Was this page helpful?
0 / 5 - 0 ratings