Getting Type string is not assignable to type string for TS component in Storybook

All we need is an easy explanation of the problem, so here it is.

I have a menu component that receives a single prop linkColor as a string to control the CSS color value of the icon and text.

I just switched everything over to TypeScript and everything is working except my Storybook implementation.

The specific error I’m getting is: Type '{ linkColor: string; }' is not assignable to type 'string'.ts(2322) on the component despite the prop having an inline type definition. I’ve tried passing the prop as an arg, passing in typeof definitions to the whole component and nothing works.

My Menu Component

const SettingsMenu = (linkColor: string) => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div className={`self-start ml-5 pb-2 paragraph-small font-medium ${linkColor}`}>
            <button className="flex items-center" onClick={() => setIsOpen(true)}>
                <Settings className="mr-3" />
                <span className="inline-block">{'Settings'}</span>
            </button>
            <SlideOut title="Settings" menuData={data} isOpen={isOpen} setIsOpen={setIsOpen} />
        </div>
    )
}

export { SettingsMenu }

My Storybook Story

import { SettingsMenu } from '../SettingsMenu'

export default {
    title: 'Settings Menu',
    component: SettingsMenu,
}

export const Primary = () => <SettingsMenu linkColor="text-black" />
// This is the line that's throwing the error

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

you can’t access the value of react component every value that passes as a prop is in the props object either you access it like props.linkColor or destruct it and define its types as well, that’s why you can’t access linkColor value in .jsx or in .tsx

interface SettingsMenuType {
  linkColor: string;
}

const SettingsMenu: React.FC<SettingsMenuType> = ({linkColor}) => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div className={`self-start ml-5 pb-2 paragraph-small font-medium ${linkColor}`}>
            <button className="flex items-center" onClick={() => setIsOpen(true)}>
                <Settings className="mr-3" />
                <span className="inline-block">{'Settings'}</span>
            </button>
            <SlideOut title="Settings" menuData={data} isOpen={isOpen} setIsOpen={setIsOpen} />
        </div>
    )
}

export { SettingsMenu }

Method 2

Your component props type is invalid.

Please define props type and use like the following.

interface SettingsMenuProps{
   linkColor: string;
}
const SettingsMenu = ({linkColor}: SettingsMenuProps) => {
....
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply