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

Question

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

Answer 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 }

Answer 2

Your component props type is invalid.

Please define props type and use like the following.

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