App.js
import { Text, View, Button, FlatList } from 'react-native';
import { useEffect, useState } from 'react';
import * as React from 'react';
const API = 'https://randomuser.me/api/users/';
const User = (props) => (
<View>
<Text>Name: {props.fname} {props.lname}</Text>
<Text>Country: {props.country}</Text>
</View>
);
const renderUser = ({item}) => <User fname={item.results[0].name.first} lname={item.results[0].name.last} country={item.results[0].location.country}/>;
export default function App() {
const [users, setUsers] = useState({});
useEffect(() => {
fetch(API)
.then((response) => response.json())
.then((json) => {setUsers(json);});}, []);
return (
<View>
<Text>{}</Text>
<Button title="add a user" onPress={() => {
fetch(API)
.then((response) => response.json())
.then((json) => {setUsers(json);}), []}}
/>
<FlatList data={users} renderItem={renderUser}/>
</View>
);
}
When I am trying to create a User component, the way I am referencing the first and last name as well as the country from json dataset is not working. I have tried using (item.results[0].name.first) but it still doesn't work. Can anyone help me figure out what I am doing wrong?