undefined is not an object (evaluating 'this.props.route.params.lead_tag_number.data') in react native - react-native

Question

I am new to react native I want to use for loop for showing multiple data. which is come from previous screen from API.
here is my code. I want to show full return view in for loop multiple times. I am getting data in this => undefined is not an object (evaluating 'this.props.route.params.lead_tag_number.data')
class Browse extends Component {
constructor(props) {
super(props);
this.state ={
Email:"",
}
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}
handleBackButtonClick() {
this.props.navigation.navigate("Browse");
return true;
}
state = {
categories: [],
error: [],
};
renderTab(tab) {
const { active } = this.state;
const isActive = active === tab;
return (
<TouchableOpacity
key={`tab-${tab}`}
onPress={() => this.handleTab(tab)}
style={[styles.tab, isActive ? styles.active : null]}
>
<Text size={16} medium gray={!isActive} secondary={isActive}>
{tab}
</Text>
</TouchableOpacity>
);
}
render() {
const { profile, navigation } = this.props;
const tabs = [""];
const route = this.props
for (let i = 0; i < this.props.route.params.data.length; i++) {
return (
<View style={{alignItems:"center", justifyContent:"center", }}>
<View style={styles.header}>
<Ionicons style={{paddingRight:290}} name="arrow-back" size={40}
color="black" onPress={() => navigation.navigate("Browse")} />
</View>
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Entypo style={{marginLeft:250}} onPress={() => this.props.navigation.toggleDrawer()} name="menu" size={30} color="black" />
</Block>
<Block flex={false} row style={styles.tabs}>
{tabs.map((tab) => this.renderTab(tab))}
</Block>
</Block>
<View style={{alignItems:"center", justifyContent:"center",height:140, width:"90%", marginTop:30}}>
<TouchableOpacity onPress={() => navigation.navigate("FormItems")}>
<Card center middle shadow style={{ height:80, width:"100%" }} >
<Text medium height={15} size={14}style={{ fontWeight: "bold", paddingRight:190}}>
{this.props.route.params.lead_tag_number.data[i]}
</Text>
</Card>
</TouchableOpacity>
</View>
</View>
)
}
}
}

Answer 1

Maybe it's problem with your for loop because you using for loop with params.data
for (let i = 0; i < this.props.route.params.data.length; i++)
and access data with params.lead_tag_number.data
this.props.route.params.lead_tag_number.data[i]
But this is not the right way to showing multiple data you can show with map function like this
render() {
const { profile, navigation } = this.props;
const tabs = [""];
const route = this.props
return (
<View style={{alignItems:"center", justifyContent:"center", }}>
<View style={styles.header}>
<Ionicons style={{paddingRight:290}} name="arrow-back" size={40}
color="black" onPress={() => navigation.navigate("Browse")} />
</View>
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Entypo style={{marginLeft:250}} onPress={() => this.props.navigation.toggleDrawer()} name="menu" size={30} color="black" />
</Block>
<Block flex={false} row style={styles.tabs}>
{tabs.map((tab) => this.renderTab(tab))}
</Block>
</Block>
{/*Use map on data as you want to show*/}
{this.props.route.params.data.map(item =>
<View style={{alignItems:"center", justifyContent:"center",height:140, width:"90%", marginTop:30}}>
<TouchableOpacity onPress={() => navigation.navigate("FormItems")}>
<Card center middle shadow style={{ height:80, width:"100%" }} >
{/*Use item*/}
<Text medium height={15} size={14}style={{ fontWeight: "bold", paddingRight:190}}>
{item}
</Text>
</Card>
</TouchableOpacity>
</View>
)}
</View>
)
}