Passing string literal as a single prop in Typescript React-CodePudding

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.

CodePudding user response：

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>
    );
};

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

where ChildComponentProps is

interface ChildComponentProps {
    name: string;
}

CodePudding user response：

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

CodePudding user response：

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>
    );
}

CodePudding user response：

Props supposed to be an object. You are not the only one using this prop object.

Note that JSX is just a syntax extension use to make it easy to read & code components.

But this code will translate into the pure javascript code,

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

The above code will translate into before execute,

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Later this createElement will also return an object which will use to build the whole element tree of your application.

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Notice the children property ? Its also a prop which was not added by you but the React it self.

NOTE: Above code snippets are directly copied from React JS documentation.

So to answer your question,

You cannot change the type of the props object. It must be an object. The reason why you seen that error message is because you forcefully telling the type of props is an string but actually it is not.

The way you should do it is,

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