import React, { useEffect, useState } from "react";
import {
Button,
StyleSheet,
TextInput,
View,
TouchableOpacity,
Text,
} from "react-native";
import axios from "axios";
export default function Home() {
const [data, setData] = useState([]);
const [indexNo, setIndexNo] = useState("");
const getUserData = () => {
axios
.get(`https://jsonplaceholder.typicode.com/todos/${indexNo}`)
.then((res) => {
const fData = res.data.data;
console.log(fData);
});
};
return (
<>
<View style={styles.mainView}>
<View style={styles.searchView}>
<TextInput
style={styles.searchBar}
keyboardType="numeric"
placeholder="Index Number e.g.25"
placeholderTextColor="#4F4F4F"
blurOnSubmit="true"
value={indexNo}
onChangeText={(e) => {
setIndexNo(e);
}}
/>
<TouchableOpacity style={styles.button} onPress={getUserData}>
<Text style={styles.buttonText}>Search</Text>
</TouchableOpacity>
</View>
<View style={styles.subView}>
<Text style={styles.title}>Your Details</Text>
<View style={{ padding: 40 }}>
{data?.map((item) => {
return (
<Text style={styles.flatListText}>
{" "}
{item.birthYear} {data?.contactNumber}
</Text>
);
})}
</View>
<View style={styles.cardButtonRow1}>
<TouchableOpacity style={styles.buttonGroup}>
<Text style={styles.btGroupText}>Sem 01</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonGroup}>
<Text style={styles.btGroupText}>Sem 02</Text>
</TouchableOpacity>
</View>
<View style={styles.cardButtonRow2}>
<TouchableOpacity style={styles.buttonGroup}>
<Text style={styles.btGroupText}>Sem 03</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonGroup}>
<Text style={styles.btGroupText}>Sem 04</Text>
</TouchableOpacity>
</View>
</View>
</View>
</>
);
}
const styles = StyleSheet.create({
mainView: {
backgroundColor: "#393939",
flex: 1,
},
searchView: {
marginTop: 50,
flexDirection: "row",
flexWrap: "wrap",
},
searchBar: {
marginLeft: 40,
backgroundColor: "#D9D9D9",
color: "#4F4F4F",
width: "50%",
height: 40,
textAlign: "center",
borderRadius: 50,
},
button: {
marginLeft: 17,
marginRight: 40,
backgroundColor: "#2369F0",
width: "24%",
height: 40,
borderRadius: 50,
},
buttonText: {
color: "#fff",
fontSize: 20,
textAlign: "center",
margin: 7,
},
subView: {
backgroundColor: "#535353",
margin: 40,
width: "80%",
flex: 1,
borderRadius: 30,
},
title: {
fontSize: 20,
fontWeight: "bold",
textAlign: "center",
paddingTop: 15,
color: "#fff",
},
cardButtonRow1: {
flexDirection: "row",
marginLeft: 30,
flexWrap: "wrap",
marginTop: 220,
},
cardButtonRow2: {
flexDirection: "row",
flexWrap: "wrap",
marginLeft: 30,
bottom: 30,
},
buttonGroup: {
backgroundColor: "#2369F0",
width: "30%",
height: "40%",
borderRadius: 30,
margin: 20,
},
btGroupText: {
color: "#fff",
textAlign: "center",
padding: 3,
},
flatListText: {
color: "red",
fontSize: 26,
},
});
I need to fetch data from given url. I gave state value to url param. It work perfectly, output object I assigned to state. when I console log that object, data come as json object. So I need that values print as Text in app. I used that for map function, but it does not work. Error or any issues dose not visible any where . please help. I’m testing with iphone7 . used CLI expo. I