In JSX how do I set a className as string + {prop}

I'm a bit new to React and trying to set a className as string + prop. But I'm not sure how to do it and whether that is the best practice.

So what I'm trying to do, and it's obviously not working, is this:

<a data-featherlight='string' + {this.props.data.imageUrl}>

How would I go about writing this?

Solution 1:

You can use string concatenation

<a data-featherlight={'string' + this.props.data.imageUrl}>

or use Template strings new ES2015 feature

<a data-featherlight={ `string${this.props.data.imageUrl}` }>

Solution 2:

You can also try it:

<a data-featherlight={'string1' + this.props.data.imageUrl + 'string2'}>

or

<a data-featherlight={ `string1 ${this.props.data.imageUrl} string2` }>

If you are using Link component then you can concatenation like this:

<Link to={`getting-started/${this.props.message}`}>
     <h1>Under {this.props.message}/-</h1>
</Link>