Apply separate CSS to one of the multiple instances of same React custom component - css

Question

I have two custom components called Grid and FieldValue and I use the FieldValue component multiple times on a particular page. I am using a class name called .black for all the FieldValue components. Now, I want to use a different class name called .blue-pointer where the data in FieldValue says view2. please help me understand how to do it.
Components on the page look like below
<Grid>
<FieldValue data={'view1'}/>
<FieldValue data={'view2'}/>
<FieldValue data={'view3'}/>
</Grid>
And the FieldValue is defined as below,
class FieldValue extends React.Component<>{
render(){
<div className="black">
{'testView'}
</div>
}
}
And the CSS is defined as below
.black{
color:#4d546d;
}
.blue-pointer {
color: #0070d2;
cursor: pointer;
}

Answer 1

Use props from your component :
class FieldValue extends React.Component{
render() {
return (
<div className={this.props.data === 'view2' ? 'blue-pointer' : 'black'}>
{'testView'}
</div>
);
}
}

Answer 2

You can define className as a prop, and give it a default value of 'black'.
class FieldValue extends React.Component<> {
static defaultProps = {
className: 'black'
}
render() {
const { className } = this.props
<div className={className}>
{'testView'}
</div>}
}
For the default case, you don't need to change anything:
<FieldValue data={'view1'} /> // Still uses the `black` style.
When you want to change the class name, use:
<FieldValue data={'view2'} className='blue-pointer' />