How to render my function inside my picture?

When you click on my picture I wanna render the text but my function doesn’t seem to be working. I’m working on react js

My html :

<Row>
      <Col md={2} s={6} xs={4}  className="blocClient"><img className='img1' src="/images/data.png" onClick={this.OnClick()} style={{cursor:'pointer'}} /></Col>
      </Row>

Also my function

OnClick = () =>{
  return(
    <Col>
    <h1>Dois-je déclarer ces pourboires et vais-je payer des impôts?</h1>
    <p>Oui, ce sont des revenus, donc il faut les déclarer et Tipourboire te met à disposition le document qui t’indique ou tu dois le noter dans ta déclaration de revenus.</p>
    </Col>)

}

Did I forget something ? on my console, when i click they also say Uncaught Error: Expected onClick listener to be a function, instead got a value of object type.

Answer

The onClick prop is actually used to call a function and execute some logic, it should not return React syntax since this makes no sense.

So what I suggest to do is to manage a “displayText” state which will be a boolean value, and then show the text depending on this state. Something like this:

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.state = { displayText: false }
  }

  OnClick = () => {
    this.setState({ displayText: !this.state.displayText })
  }

  render() {
    return (
      <div>
        <Row>
          <Col md={2} s={6} xs={4} className="blocClient">
            <img className='img1' src="/images/data.png" onClick={this.OnClick} style={{ cursor: 'pointer' }} />
          </Col>
        </Row>
        {this.state.displayText && (
          <Col>
            <h1>Dois-je déclarer ces pourboires et vais-je payer des impôts?</h1>
            <p>Oui, ce sont des revenus, donc il faut les déclarer et Tipourboire te met à disposition le document qui t’indique ou tu dois le noter dans ta déclaration de revenus.</p>
          </Col>
        )}
      </div>
    )
  }
}

export default Content 

Also, notice that you should remove the parenthesis in the onClick prop of the img tag. It should be this.OnClick instead of this.OnClick()