CODEWITHSUNDEEP
javascriptreactjstypescriptreact-native
Evolis
Evolis

Reputation: 135

Use prop as style index with typescript

I am currently building a component which has props and want to use the prop as an index for styles but i get a typescript error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ success: { color: string; }; warning: { color: string; }; error: { color: string; }; }'. No index signature with a parameter of type 'string' was found on type '{ success: { color: string; }; warning: { color: string; }; error: { color: string; }; }'.ts(7053)

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

type InfoBoxProps = {
  text: string
  context: string
}

const InfoBox: React.FC<InfoBoxProps> = ({ text, context }) => {
  return (
    <View>
      <Text style={styles[context]}>{text}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  success: {
    color: 'green'
  },
  warning: {
    color: 'yellow'
  },
  error: {
    color: 'red'
  }
})

export default InfoBox

Upvotes: 0

Views: 536

Answers (1)

thedude
thedude

Reputation: 9812

Try defining context as:

type InfoBoxProps = {
  text: string
  context: keyof typeof styles
}

Upvotes: 3

Related Questions