Set background color dynamically in React native - reactjs

Question

I´m creating a weather application where I want the background color to change dynamically based on weather conditions fetched from OpenWeatherMaps API. However, I´m not really sure how to do this since I get an error message that says: "Undefined is not an object (near '...}]color...')
Right now I´ve pre-defined the conditions in a separate file called WeatherConditions, and I want the props in my Weather file to determine the background color. How can I do this?
This is my render method in the Weather file. The problem lies in the first view tag after return:
render() {
const {
weatherCondition,
city,
country,
temperature,
placeholder,
weatherDescription,
getWeather,
handleTextChange,
searchedCity
} = this.props;
const {
weatherContainer,
headerContainer,
tempText,
tempContainer,
bodyContainer,
inputContainer,
textInputStyle,
subtitle,
title
} = styles;
return (
<View
style={[
weatherContainer,
{
backgroundColor:
weatherConditions[{ weatherCondition }].color
}
]}
>
{" "}
// Does not work right now.
<View style={headerContainer}>
<Text style={tempText}>
{" "}
{city} {country}
</Text>
<Text style={tempContainer}>
{" "}
{Math.round(temperature)}
˚C
</Text>
</View>
<View style={bodyContainer}>
<View style={inputContainer}>
<TextInput
style={textInputStyle}
onChangeText={searchedCity =>
handleTextChange(searchedCity)
}
onSubmitEditing={() => getWeather()}
placeholder={placeholder}
clearTextOnFocus={true}
enablesReturnKeyAutomatically={true}
/>
</View>
<Text style={title}>{weatherCondition}</Text>
<Text style={subtitle}>{weatherDescription}</Text>
</View>
{this.renderLoading()}
</View>
);
}
My WeatherCondition file:
export const weatherConditions = {
Thunderstorm: {
color: '#303952'
},
Drizzle: {
color: '#8aacb8'
},
Rain: {
color: '#786fa6'
},
Snow: {
color: '#00d8d6'
},
Atmosphere: {
color: '#ff5252'
},
Clear: {
color: '#f5cd79'
},
Clouds: {
color: '#0be881'
},
}

Answer 1

It should be
<View style={[weatherContainer, {
backgroundColor: weatherConditions[weatherCondition].color
}]}>
Note the syntax weatherConditions[weatherCondition].color, you don't need any curly brackets.
weatherConditions is an object, weatherCondition is variable. To access property by variable name, you use bracket notation.