CODEWITHSUNDEEP
reactjs
adviner
adviner

Reputation: 3567

React jsx setting element attributes

I'm trying to set the an elements attributes that is from a state

    this.state = {
        label : 'Hello',
        columns: [4, 8],
        test: 'has-success'
    }

I was trying to set the col-md value like so:

<label className="control-label text-sm-right col-sm-{this.state.columns[0]}">

but that didnt work. So I wanted to see what that values is if I used the console.log()

console.log('control-label text-sm-right col-sm-{this.state.columns[0]}');

and the output shows that it didnt change the value to col-sm-4:

enter image description here

but when I use it this way it works:

<span className="input-group-addon">{this.state.columns[0]}</span>

enter image description here

Upvotes: 0

Views: 84

Answers (2)

xyc
xyc

Reputation: 181

If you are using ES6, you can use template string literals.

<label className={`control-label text-sm-right col-sm-${this.state.columns[0]}`}>

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33628

Append a string to the variable. Something like this instead

className={"control-label text-sm-right col-sm-"+this.state.columns[0]}

Upvotes: 1

Related Questions