Question

0

125

Views

Passing string literal as a single prop in Typescript + React

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.

about 4 years ago · Santiago Trujillo

3 answers

Answer question

0

You have to destructure it from props object.

props is an object.

CODESADNBOX LINK

const ChildComponent = (props: ChildComponentProps) => {
    const { name } = props; // CHANGE THAT YOU HAVE TO DO
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>{name}</p>
        </div>
    );
};

or

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

where ChildComponentProps is

interface ChildComponentProps {
    name: string;
}

about 4 years ago · Santiago Trujillo Report

0

Define a prop interface the define the props parameter as object :

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