Error React Native undefined is not an object (evaluating 'weatherOptions[condition].iconName&#-CodePudding

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,
};

CodePudding user response：

First define all the possible conditions under the weatherOptions Like below

const weatherOptions = {
  Clouds: {
    iconName: 'cloud',
  },
  Thunderstorm: {
    iconName: 'Thunderstorm',
  },
  Drizzle: {
    iconName: 'Drizzle',
  },
  Rain: {
    iconName: 'Rain',
  },
  Snow: {
    iconName: 'Snow',
  },
  Clear: {
    iconName: 'Clear',
  },
}

CodePudding user response：

Reload metro ! Or change version