Applying className based on criteria match

Question

Basically I'm trying to see if the rating matches certain criteria then apply certain styles to each star in the list. Problem i'm running into is that only twoStar gets applied to all the list of stars className. How do I apply classname based on criteria match.

const starCluster = <div><FaStar /><FaStar /><FaStar /></div> const starColor = (props) => { props.stardata.forEach((f, i) => { if (f.rating > 1 && f.rating <= 1.9) { return starColor = <div className="oneStar">{ starCluster }</div> } if (f.rating >=2 && f.rating <= 2.9) { return starColor = <div className="twoStar">{ starCluster }</div> } }) return ( <div> <ul> { props.stardata.map((sta, i) => { return <div key={i}> <li > {sta.name} {starColor} </li> </div> } } </ul> </div> }

edit:props.stardata is this way

[{name: "sirius", rating: 1.4}, {name: "polaris", rating: 2.4}, {name: "algol", rating: 3.6}]

See my today's earlier answer which will help you solving your problem. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Aug 16, 2018 at 16:16

Fernando · Accepted Answer · 2018-08-16 16:36:23Z

If you can add npm packages, I would highly recommend the classNames npm package, which greatly simplifies conditional class names.

You can basically pass in an object, where if the value is true, its key gets added as a className.

Example:

<div className=(classNames{ key1: true, key2: false, key3: 3 > 2, key4: 5 < 1 }) />

Would render:

<div className="key1 key3" />

because the values for key1 and key3 return true in the classNames object.

In your case:

After npm install classnames --save, you can do:

var classNames = require('classnames'); const starCluster = <div><FaStar /><FaStar /><FaStar /></div> const starColor = (props) => ( <div> <ul> { props.stardata.map((sta, i) => ( <div key={i}> <li> {sta.name} <div className={classNames( oneStar: sta.rating > 1 && sta.rating <= 1.9, twoStar: sta.rating >= 2 && sta.rating <= 2.9 )}>{ starCluster }</div> </li> </div> ); } </ul> </div> );

Hope that helps!

Hemadri Dasari · Accepted Answer · 2018-08-16 16:29:50Z

Can you try below updated code

const starCluster = <div><FaStar /><FaStar /><FaStar /></div> const starColor = (props) => { let rows = []; let starClr = ""; props.stardata.map((sta, i) => { if (sta.rating > 1 && sta.rating <= 1.9) { starClr = <div className="oneStar">{ starCluster }</div>; } if (sta.rating >=2 && sta.rating <= 2.9) { starClr = <div className="twoStar">{ starCluster }</div> } rows.push(<li key={i}> {sta.name} {starClr} </li>) }); return ( <div> <ul> {rows} </ul> </div> ) }

Rajan Lagah · Accepted Answer · 2018-08-16 16:35:43Z

You can use classnames npm install classnames --save

props.stardata.map((sta, i) => { starColor = <div className={classNames({'oneStar',f.rating>1&&f.rating<=1.9}, {'twoStar',f.rating>=2&&f.rating<=2.9})}></div> rows.push(<li key={i}> {sta.name} {starColor} </li>) });

The way it work is that you have to pass it object {class-U-want:condition-U-want}.It will set all that class-u-want as className which as full fill the condition (true)

<div className={classNames({'danger':true},{'noDanger':false})}> </div>

is equal to

<div className='danger'> </div>

Collectives™ on Stack Overflow

Applying className based on criteria match

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related