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

Question

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?

Answer 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}` }> 

Answer 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>