help required: classNames with 'props' about classnames

[longlho]

yeah I don't see why not

[ssjogus]

Somehow when i try to set 'className' depending on the 'props'

//..
 return <button className={btnClass}  >{this.props.label}</button>;
//..
 <Button label='click here'  flag='success'/>
 <Button label='click here'  flag='warning'/>

it gives both the classes to both the buttons..

Html it is creating is this like this. Shouldn't one button have 'btn-success' and another one have 'btn-warning' classes. Or do i need to create for each button different variables?

<button class="btn btn-sm btn-success btn-warning" data-reactid=".0.$=12">click here</button>
<button class="btn btn-sm btn-success btn-warning" data-reactid=".0.$=12">click here</button>

[JulienMelissas]

@ssjogus if you're using ES6 you can use template strings and this should simply things and work great:

var btnClass = classNames('btn', 'btn-sm', {
  `btn-${this.props.flag}`: this.props.flag
});

[JulienMelissas]

But if you're wondering why your code up there didn't work, I think you need to check for the string you're passing in: 'btn-success': this.props.flag === 'success' not 'btn-success': this.props.flag.success

[ssjogus]

hi @JulienMelissas ,

thanks for your answer..i was writing it in wrong way..

your answer 'btn-success': this.props.flag === 'success'

worked really well.

thanks once again..

[jasonwbullok]

@JulienMelissas Template literals can't actually be used as a key in an Object literal. A computed property should be used:

['btn-' + this.props.flag] instead of btn-${this.props.flag}

See: Using a variable for a key in a JavaScript object literal