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
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.
Most helpful comment
Potentially a typo. Are you meaning to import and use
FlatListfrom react-native?