typescript string interpolation with lodash-CodePudding

In my application, I have a H custom component that takes in a header and a subheader as props.

For my header prop, I want to concatenate the lodash expression with a string. See below my code.

        <H
          header= `${_.startCase(type)} SomeString`
          subheader= "Lorem ipsum do eiusmod"
        />

I have tried the suggestions here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals, but maybe because I am using lodash it is not working.

CodePudding user response：

The syntax for your prop is incorrect:

header={`${_.startCase(type)} SomeString`}

In React, any prop value that contains code must be enclosed in {}.

Only constant strings like prop="a string" may be passed without a pair of enclosing {}. All other values require it*.

* Well there are two special cases.

children which is set like the following. Here children is something like <>content</>.

<MyComponent>content</MyComponent>

And boolean shorthand props. Here isCool is true.

<MyComponent isCool />

Although, if you want to set it to false you need curly braces again:

<MyComponent isCool={false} />