Search code examples
javascriptreactjstypescriptlodashinterpolation

typescript string interpolation with lodash

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.

Solution

  • 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} />