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

Reactjs

Reactjs Problem Overview

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?

Reactjs Solutions

Solution 1 - Reactjs

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

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>

Solution 3 - Reactjs

As far as I know, first:

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

Second:

<a data-featherlight={`your string ${this.props.data.imageUrl}`}>
Categories
Recommended Reactjs Solutions

Previous Solution:

Babel unexpected token import when running mocha tests

node.jsNpmSyntax Errormocha.jsBabeljs

Next Solution:

How to verify if nginx is running or not?

UbuntuNginxMono

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionandromedainiativeView Question on Stackoverflow
Solution 1 - ReactjsOleksandr T.View Answer on Stackoverflow
Solution 2 - ReactjsShubham VermaView Answer on Stackoverflow
Solution 3 - ReactjsirsalsssView Answer on Stackoverflow