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