Why does an error occur in expressing data within the Alert.alert() function? - react-native

Question

I'd like to put a title in the Alert.alert() and display the data under the title.
I'd appreciate it if you could tell me where the problem is and how to solve it.
import React, { Component } from "react";
import {
TouchableOpacity,
Text,
View,
ListView,
TouchableHighlight,
Dimensions,
Image,
Animated,
StyleSheet,
TextInput,
ImageBackground,
Alert,
FlatList
} from "react-native";
import { SearchBar, ListItem, List } from "react-native-elements";
import Ionicons from "#expo/vector-icons/Ionicons";
import sitterdata from "../components/sitterdata";
const { width, height } = Dimensions.get("window");
/*
const datas = [
{
name: "Registers",
route: "Registers",
icon: "phone-portrait",
bg: "#C5F442"
},
{
name: "PetSitters",
route: "PetSitters",
icon: "easel",
bg: "#C5F442"
}
];
*/
export default class PetSitters extends Component {
constructor(props) {
super(props);
this.state = {
data: sitterdata,
refreshing: false
};
}
static navigationOptions = ({ navigation }) => {
return {
title: "Pet Sitters",
headerLeft: (
<TouchableOpacity
style={{ padding: 5, paddingRight: 15 }}
//dataArray={datas}
onPress={() => navigation.openDrawer()}
>
<Ionicons name={"ios-menu"} size={35} color={"#fff"} />
</TouchableOpacity>
),
headerRight: (
<TouchableOpacity
style={{ padding: 5, paddingRight: 15 }}
onPress={() => navigation.navigate("Add")}
>
<Ionicons name={"ios-add"} size={35} color={"#fff"} />
</TouchableOpacity>
)
};
};
showAlert(navigation) {
Alert.alert(
"이 펫시터와 거래 하시겠습니까?",
// this.item.bind(sitterdata.by),
//"데이터 입력",
this.state.data(sitterdata.by),
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => navigation.navigate("Add") }
],
{ cancelable: false }
);
}
async filterSearch(text) {
const newData = sitterdata.filter(function(item) {
const itemData = item.address.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
await this.setState({
data: newData,
text: text
});
}
refreshData = () => {};
renderItem = ({ item }) => {
return (
<TouchableHighlight style={styles.containerCell}>
<View>
<TouchableOpacity
onPress={() => this.showAlert(this.props.navigation)}
>
<Image
style={{
width: width,
height: 180,
resizeMode: "stretch"
}}
source={{ uri: item.image }}
/>
</TouchableOpacity>
<View style={styles.footerContainer}>
<View style={styles.imageUser}>
<Image style={styles.imageAvatar} source={{ uri: item.user }} />
</View>
<View style={styles.footerTextContainer}>
<Text style={styles.text}>{item.introduce}</Text>
<Text style={[styles.text, styles.textTitle]}>
{item.address}
</Text>
<Text style={[styles.text, styles.textBy]}>By {item.by}</Text>
</View>
</View>
</View>
</TouchableHighlight>
);
};
render() {
return (
<View style={styles.container}>
<Animated.View
style={[
styles.content,
{
width: width,
backgroundColor: "#dfe4ea",
flex: 1,
transform: [
{
perspective: 450
}
]
}
]}
>
<SearchBar
onChangeText={text => this.filterSearch(text)}
placeholder={"여기에 입력하세요"}
value={this.state.text}
lightTheme
containerStyle={{}}
/>
<FlatList
style={styles.listContainer}
onRefresh={this.refreshData}
renderItem={this.renderItem}
refreshing={this.state.refreshing}
data={this.state.data}
keyExtractor={(item, index) => item.address}
/>
</Animated.View>
</View>
);
}
}
The code above is the entire code, and the error is generated by the data representation under the title in Alert.alert().
I think it's a matter of how the Alert.alert data is expressed, but I can't find out which part is wrong.
showAlert(navigation) {
Alert.alert(
"이 펫시터와 거래 하시겠습니까?",
// this.item.bind(sitterdata.by),
//"데이터 입력",
this.state.data(sitterdata.by),
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => navigation.navigate("Add") }
],
{ cancelable: false }
);
}
The code above is an Alert.alert() function that I am failing.
enter image description here
export default (sitterdata = [
{
id: 1,
image:
"https://postfiles.pstatic.net/MjAxOTAxMTVfMjk3/MDAxNTQ3NTEzMDI1MDEx.ODD9YUUNc5YSk4Zz1wTgxmpf_BRr154ekJ-vJQ1f3ocg.u1uIXInfJ3O2PTKFmKFaI46epH_e8IzD5TEB96K-eF4g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.43.png?type=w966",
introduce: "강아지 전문 펫시터에요 잘부탁드립니다",
address: "평택시 서정동",
user:
"https://postfiles.pstatic.net/MjAxOTAxMTVfOTQg/MDAxNTQ3NTEyODU0NDk4.DcAvlx3CGY9pGFlgWZA7mIr6_SCt8h_gGaHYGAFlDIYg.bQ9kBiykOzlbxyIyQ3nTCO7lGw4NVmmIeDV7pz0OX94g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.28.54.png?type=w966",
by: "수지"
},
{
id: 2,
image:
"https://postfiles.pstatic.net/MjAxOTAxMTVfMTMx/MDAxNTQ3NTEzMDMzMDgx.SbY_nsX7oK4UlZGzre6U5dLHinRfCoAYyvnSzXuZR7cg.5K3sX7E0bDpgyzDifD174hfQBOnJDtLVFqTe8BHH7Gcg.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.57.png?type=w966",
introduce: "나의 반려견은 편안하고 주인님은 안심할 수 있게",
address: "서울특별시 서초구",
user:
"https://postfiles.pstatic.net/MjAxOTAxMTVfMjU2/MDAxNTQ3NTEyODY3MTE2.X4LDN12uIgRkOFrUChl0s9UnKiu9VOPEOkWbIRHPDpgg.DrmXUbVURwsTuGs5dlOL_wugRf1nnANxWSIN4jYkdX0g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.29.23.png?type=w966",
by: "손예진"
},
{
id: 3,
image:
"https://postfiles.pstatic.net/MjAxOTAxMTVfOTIg/MDAxNTQ3NTEzMDM3MDAy.p_CNMU7vlCaELYpfuqf6H9GrCEPe9BzFdeNojFuKGc4g.65lwFvImqL2QgC01mNPzIUbY0tgBz4lukZplv9NZkJAg.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.43.14.png?type=w966",
introduce: "밍밍이와 함꼐하는 좋은 친구들 :-)",
address: "대전광역시 유성구",
user:
"https://postfiles.pstatic.net/MjAxOTAxMTVfMjY4/MDAxNTQ3NTEzMDE5MDI2.fmBkO0W8lFwWCzo3KrJ3EDkTTZ_NmAKH0wlF050XMcYg.GJ8JTbs5nQNosj1ZhkK-1lm-ah2LIAN7i_d3hjIQ4K8g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.09.png?type=w966",
by: "문채원"
}
]);
add Data code
showAlert(navigation) {
Alert.alert(
"이 펫시터와 거래 하시겠습니까?",
// this.item.bind(sitterdata.by),
//"데이터 입력",
item.by,
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => navigation.navigate("Add") }
],
{ cancelable: false }
);
}
async filterSearch(text) {
const newData = sitterdata.filter(function(item) {
const itemData = item.address.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
await this.setState({
data: newData,
text: text
});
}
refreshData = () => {};
renderItem = ({ item }) => {
return (
<TouchableHighlight style={styles.containerCell}>
<View>
<TouchableOpacity
onPress={() => this.showAlert(this.props.navigation, item)}
>
<Image
style={{
width: width,
height: 180,
resizeMode: "stretch"
}}
source={{ uri: item.image }}
/>
</TouchableOpacity>
<View style={styles.footerContainer}>
<View style={styles.imageUser}>
<Image style={styles.imageAvatar} source={{ uri: item.user }} />
</View>
<View style={styles.footerTextContainer}>
<Text style={styles.text}>{item.introduce}</Text>
<Text style={[styles.text, styles.textTitle]}>
{item.address}
</Text>
<Text style={[styles.text, styles.textBy]}>By {item.by}</Text>
</View>
</View>
</View>
</TouchableHighlight>
);
};
Corrected the answer but item not found.

Answer 1

You don't need to access the this.state.data inside your showAlert function you could actually pass the item to the function and use that. I would update your showAlert function to the following
showAlert(navigation, item) {
Alert.alert(
"이 펫시터와 거래 하시겠습니까?",
// this.item.bind(sitterdata.by),
//"데이터 입력",
item.by,
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => navigation.navigate("Add") }
],
{ cancelable: false }
);
}
As you are creating the link to the showAlert function inside the renderItem function I would just pass the item that you are using to that function.
So your renderItem now would look like
renderItem = ({ item }) => {
return (
<TouchableHighlight style={styles.containerCell}>
<View>
<TouchableOpacity
onPress={() => this.showAlert(this.props.navigation, item)} // here we now pass the item
>
<Image
style={{
width: width,
height: 180,
resizeMode: "stretch"
}}
source={{ uri: item.image }}
/>
</TouchableOpacity>
<View style={styles.footerContainer}>
<View style={styles.imageUser}>
<Image style={styles.imageAvatar} source={{ uri: item.user }} />
</View>
<View style={styles.footerTextContainer}>
<Text style={styles.text}>{item.introduce}</Text>
<Text style={[styles.text, styles.textTitle]}>
{item.address}
</Text>
<Text style={[styles.text, styles.textBy]}>By {item.by}</Text>
</View>
</View>
</View>
</TouchableHighlight>
);
};