OnClick Not Working While Looping To Other Components in React

Sorry for function names

I have a basic react app where it fetches the data i.e title and topic of blog and displays on the website

This is my List Component

import React , {Component} from 'react';

import axios from 'axios'
import Card from './Card.js'

var cardComponent;
class getBlogs extends Component {



  componentDidMount(){

    axios.get('http://localhost:8081/v1/todolist/todo1', {

      })
      .then( (response)=> {


       this.setState({retrieved : true})
        this.setState({data : response.data})

      })
      .catch(function (error) {
        console.log(error);
      });

  }


  constructor(){
    super();

    this.state = {
  data : 'none' ,
  retrieved : 'true'


    }
  }


onned = (event)=>{

  console.log('lof')
}


  oh= ()=>{
    if(this.state.data !== 'none'){
       cardComponent = this.state.data.map((user , i)=>{
        var some = this.state.data;
        console.log(some[i].title)
        return <Card
          onClick={this.onned()}
          title={some[i].title}
          topic={some[i].topic}
        /> ;
      });
      return cardComponent;
    }
}



  render(){

    if(this.state.retrieved === true){
      return (

<div>
{this.oh()}
</div>



      );
    }
    else{

      return (
          <h1>Loading............................</h1>
      );
    }



  }

}

export default getBlogs;

It is fetching data and the oh function loops the data and sends to Card Component

Card.js

import React from 'react';

class Card extends React.Component {
  constructor(props) {
    super(props);
  }


onDiv = (event)=>{
  console.log('hello')
}

  render() {
    return (
      <div className="container">
          <div  onClick ={this.onDiv()} style= className=" form-control bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
              <div style=>


                   <h1   style= className="display-2">{this.props.title}</h1>
                   <h1   style= className="">{this.props.topic}</h1>
             </div>


          </div>

            <br/>
            <br/>

    </div>


    );
  }
}

export default Card;

Now what I want is if an user clicks one of the list of blog names it should redirect to other location but onClick of div is not working

While rendering itself the onClick gets executed

pls dont downvote i may get blocked