I am writing a weather app for React Native. You need to pass the name to the Ionicons parameters depend on the weather but it displays an error undefined is not an object (evaluating 'weatherOptions[condition].iconName')
import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, Text, View, StatusBar } from "react-native";
import Ionicons from "@expo/vector-icons/Ionicons";
import { LinearGradient } from "expo-linear-gradient";
const weatherOptions = {
Clouds: {
iconName: 'cloud',
},
}
export default function Wather({ temp, condition }) {
return (
<LinearGradient
// Button Linear Gradient
colors={["#4c669f", "#3b5998", "#192f6a"]}
style={styles.container}
>
<StatusBar barStyle="light-content" />
<View style={styles.halfContaine}>
<Ionicons
name={weatherOptions[condition].iconName}
size={96}
color="white"
/>
<Text style={styles.temp}>{temp}°</Text>
</View>
<View style={styles.halfContaine}></View>
</LinearGradient>
);
}
Wather.propTypes = {
temp: PropTypes.number.isRequired,
condition: PropTypes.oneOf([
"Thunderstorm",
"Drizzle",
"Rain",
"Snow",
"Clear",
"Clouds",
]).isRequired,
};