I can pass something like this fine:

<CardTitle title={this.props.post.title} subtitle={
    <Link to={this.props.post.author}>{this.props.post.author}</Link>
} />

But I need to pass both a ponent and some string text, but doing this doesn't work:

<CardTitle title={this.props.post.title} subtitle={(`
    This is a link: ${<Link to={this.props.post.author}>{this.props.post.author}</Link>}
`)} />

What's the right syntax for this?

I can pass something like this fine:

<CardTitle title={this.props.post.title} subtitle={
    <Link to={this.props.post.author}>{this.props.post.author}</Link>
} />

But I need to pass both a ponent and some string text, but doing this doesn't work:

<CardTitle title={this.props.post.title} subtitle={(`
    This is a link: ${<Link to={this.props.post.author}>{this.props.post.author}</Link>}
`)} />

What's the right syntax for this?

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Mar 17, 2018 at 22:52 user967451user967451

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Try passing it as a React Element altogether, not as a string:

<CardTitle
  title={this.props.post.title}
  subtitle={
    <span>
      This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link>
    </span>
  }
/>

Then should be able to render subtitle as is. If you're using React >16, you might want to use Fragments for this:

import { Fragment } from 'react';

// ...

subtitle={
  <Fragment>
    This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link>
  </Fragment>
}