onClick in dataFormat() fires without actual 'clicking'

I define my TableHeaderColumn as follows:

<TableHeaderColumn dataField="someData" dataFormat={this.valueFormatter}>Value</TableHeaderColumn>

As the valueFormatter I have following code:

valueFormatter(cell, row){
  return (
    <p onClick={console.log('value clicked')}>{cell}</p>
    );
}

The table generates without errors but in the console I see value clicked 10x (as much as there are rows). What I want: The function (in the above example a simple console.log()) should be called only if I click on the element.

What is wrong with my code, or is there another way to solve this?

[AllenFang]

This should be good for your case,

class ValueFormatter extends React.Component{

  handleClick(e){
    console.log('value clicked');
  }

  render(){
    return (
      <p onClick={this.handleClick.bind(this)}>{this.props.data}</p>
    );
  }
};

function valueFormatter(cell, row){
  return (
    <ValueFormatter data={cell}/>
  );
}

[staminaloops]

Hello, Try

valueFormatter(cell, row){
  return (
    <p onClick={() => console.log('value clicked')}>{cell}</p>
    );
}

It worked for me.