How to use the useState() with specific strings ("this"

I am trying to use the useState in React-native with TypeScript and want to use specific strings that can be used in a component. How can I do this?

I have this:

                                             |
                                             \/
const [getViewState, setViewState] = useState();
                 |
                 \/
<Icon name={getViewState} size={25} color={COLORS.light_gray}></Icon>

type props = {
  style?: StyleProp<ImageStyle>;
  name: "add" | "check" | "down" | "home" | "lock" | "right" | "search" | "settings" | "user" | "grid" | "list";
  size: number;
  color: string;
  onPress?: Function;
};```

CodePudding user response：

If I've understood what you're trying to do, above where you've written the type for your Icon component's props, you can separate out the string type:

type IconName = 'add' | 'check' | 'down' // etc.

interface IconProps {
  name: IconName
  size: number
  // etc.
}

And then, you can pass a type parameter to your useState call

const [name, setName] = useState<IconName>('add')
                                    ^

<Icon name={name} size={25} color={COLORS.light_gray} />

CodePudding user response：

useState Accepts a Generic type.

type MyType = "str1" | "str2"

useState<MyType | null>(null)

Thus you can spicify what kind of state you want.

In your example:

const [getViewState, setViewState] = useState<"string1" | "string2">("string1")

CodePudding user response：

const [viewState, setViewState] = useState("myDefaultStateString")

<Icon name={viewState} size={25} color={COLORS.light_gray}></Icon>

// change state
const someFunciton = () => {
  setViewState("someOtherString")
}