Index in style property with react native

Question

I'm building an app with react native and i try to pass an index to a style property, to have different backgroundColor.

here's my code :

getData(data){
    const items = data.map((item, index) =>
        <View key={index} style={[styles.forecastItems, styles.forecastItems0]}>
            <Text>{item.day}</Text>
            <Image source={item.url}/>
            <Text>{item.temp}</Text>
        </View>
    );
    return (items)
}

in styles.forecastItem0 i want to have the index instead of 0. i don't find a solution. Thanks for your help

Answer 1

you can use Template literals:

<View key={index} style={[styles.forecastItems, styles[`forecastItems${index}`]]}>