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

Question

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

Answer 1

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")

Answer 2

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

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

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