Passing string literal as a single prop in Typescript + React

August 14, 2022

It seems this concept is so basic, there’s a lack of documentation about it. I can pass objects as props, but can’t seem to pass a basic string literal.

Functional Component

I have a functional component that takes a typed prop, like so:

const ChildComponent = (name: string) => {
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>
                { name }
            </p>
        </div>
    );
}

and call it like so:

<ChildComponent name="testName" />

Error

VSCode throws the error on ChildComponent:

Type ‘{ name: string; }’ is not assignable to type ‘string’

I’m very new to Typescript, but from what I can tell, it’s reading the string literal as an object.

Possible Solutions

Much of what I’ve read advises creating a custom typed prop, even for a single property, like so:

Type: NameProp {
name: string
}

and using that as the prop type, instead of string.

Isn’t this overkill? Or am I missing something very basic.

>Solution :

const ChildComponent = ({ name }: { name: string }) => {
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>{name}</p>
        </div>
    );
};