Search code examples
reactjstypescriptreact-bootstrapbootstrap-5

Problem with using string variable on React-bootstrap's OverlayTrigger placement attribute

I have an unexpected error with the OverlayTrigger component from React-Bootstrap ver. 5.1.1 I'm trying to create my own customized button component using overlaytrigger and a button. Everything works as I want except using a variable for the tooltip placement. It might just be because I am a typeScript noob but I don't know what to do when i see error messages like this. Has anyone else seen this problem before, know a workaround or perhaps know what to do with error messages like these in general?

placement attribute on overlaytrigger not allowing string variables in typescript.

Error tooltip explaining string is not allowed.

It clearly works with a hard coded string.

Solution

  • The placement variable for OverlayTrigger is a type which is declared as Placement, you are able to inspect any type if you want for more information (e.g. by pressing F12 on the input variable).

    For your example you are able to specify placement with string value "bottom" because this value is derived from BasePlacement "right" | "top" | "bottom" | "left" and the value is able to resolve to this type.

    However when trying to set your variable {tooltipPlacement} it is resolved as type of string, because this is what it's declared as, your compiler gives you this information.

    Type 'string' is not assignable to type 'Placement | undefined'.ts(2322)

    Solution

    One way to solve this is to tell the compiler what type you want to cast this variable to, you know that "bottom" is a valid value to resolve to type of Placement.

    placement={tooltipPlacement as Placement}