React button onClick not functioning properly - reactjs

Question

can you help me understand why this onClick event does not bind to the button and won't fire?
class DateSlider extends React.Component{
constructor(props){
super(props);
this.state = {
allValues: this.props.allValues,
}
this.onClick = this.onClick.bind(this);
}
onClick(){
console.log('here');
// this.props.change(event.target.text);
}
render(){
return (
<div class="date-slider col-xl-4 col-12">
<div class="row">
<div class="date-input-description col-xl-12 col-12">{this.props.unit}</div>
<div class="col-xl-12 date-picker-container">
<div class="col-xl-12">
<div class="row" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="date-range col-xl-9 col-9">{this.props.initialValue}</div>
<div class="col-xl-3 col-9 date-picker-small-button">
<img class="mx-auto d-block" src="./images/small-arrow-down.svg" />
</div>
<div class="dropdown-menu dropdown-menu-right">
{
//HERE
this.state.allValues.map((value) => {
return <button key={value} class="dropdown-item" type="button" onClick={this.onClick}>{value}</button>
})
}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
When clicking on the item that is rendered, it won't console.log anything.

Answer 1

this.state.allValues.map((value) => {
return <button key={value} class="dropdown-item" type="button" onClick={this.onClick}>{value}</button>})
should be
this.state.allValues.map((value) => {
return <button key={value} className="dropdown-item" type="button" onClick={this.onClick}>{value}</button>})
In other words: replace the class attribute with className.