Pass Variable to child component from card click - reactjs

Question

im new in react and well im trying to pass a value from a card click to a child component, i tried a lot of different options but is not working.... can please someone give me a hand with this.
Parent :
import React, { Component } from 'react';
import {
Card, CardImg, CardBody,
CardTitle
} from 'reactstrap'; import { Container, Dimmer, Loader } from 'semantic-ui-react'
import logo from './santa.png'
import Divisiones from './division';
class divisionesSisa extends Component {
constructor() {
super()
this.state = {
division: "1"
}
this.methodFetch = this.methodFetch.bind(this)
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
this.methodFetch()
}
fetch(endpoint) {
return window.fetch(endpoint)
.then(response => response.json())
.catch(error => console.log(error))
}
methodFetch() {
this.fetch('/####')
.then(results =>  {
return results;
}).then(data => {
this.setState(data)
})
}
handleClick = (e) =>{
this.setState({ division: e.target.id });
}
render() {
let { data } = this.state
return data
?
<div className="row">
{Object.keys(data).map((key) => {
return <div className="col-md-2">
<Card>
<CardImg style={{ justifyContent: 'center', alignItems: 'center', marginLeft: 0, marginRight: 1 }} src={logo} alt="Card image cap" />
<CardBody style={{ marginBottom: 10, marginLeft: 0, marginRight: 0 }}>
<a id={data[key]} href="sisa/division" onClick={() => this.handleClick}><CardTitle align="center" >{data[key]}</CardTitle></a>
</CardBody>
</Card>
</div>
})}
<Divisiones division={this.handleClick.bind(this)}/>
</div>
: <Container text>
<Dimmer active inverted>
<Loader content='Loading' />
</Dimmer>
</Container>
}
}
export default divisionesSisa;
Child component
import React, { Component } from 'react';
class division extends Component {
constructor(props){
super(props)
}
componentDidMount(){
console.log(this.props.division)
}
show(){
}
render() {
return(
<div>
<h2>{this.props.division}</h2>
</div>
);
}
}
export default division;
what im doing wrong?
i take any suggestions to fix this problem or change the way im using react

Answer 1

I believe you should use the state to set division prop in 'Divisiones'
const { division } = this.state
<Divisiones division={ division }
[Edit]
As you are receiving 'undefined', I have noticed that you don't pass event to your handleClick function.
You are expecting an event parameter here:
handleClick = (e) => {
this.setState({ division: e.target.id });
}
So you should pass the parameter like this:
onClick={(event) => this.handleClick(event)}
plus you could also add a onClick function on the CardImg