Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
HiCompany5680 opened this issue Nov 24, 2019 · 2 comments

Comments

@HiCompany5680
Copy link

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

@bkd705
Copy link

bkd705 commented Nov 25, 2019

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

@aweary
Copy link
Contributor

aweary commented Dec 8, 2019

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.

@aweary aweary closed this as completed Dec 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants