How do i check if one of my “`LoggBockRowItem“` has been clicked?

This is the box that my items fits in

function CardRows (props){
    return <div className={classes.cardRow} onClick={props.onClick}>
        {props.children}
    </div>
}

export default CardRows;

this is the item itself

function LoggBockRowItem(props){
    return(
        <CardRows onClick={props.onClick}>
            <div>
            <p className={classes.indentDate}>{props.datum}-{props.tid}</p>
            </div>
                <p className={classes.biggertext}>{props.skift}</p>
            <div className={classes.displayblock}>
               <li className={classes.biggertext}>{props.anläggningsdel}</li>
               <li className={classes.displayborder}>{props.driftstatus}</li>
            </div>
            <p className={classes.textoverflow}>{props.beskrivning}</p>
            <div className={classes.displayblock}>
                <li className={classes.biggertext}>{props.plats}</li>
                <li className={classes.loweropacitytext}>{props.rapporterare}</li>
            </div>
            <p className={classes.biggertext}>{props.rapporterare}</p>
        </CardRows>
    )
}

export default LoggBockRowItem;

this is the class where i think i need to check onClick if an item has been clicked

class LoggBockRowList extends Component{
    constructor(props){
        super(props);
        this.state ={
            loggbocks: null
        };
    }

    static getDerivedStateFromProps(props, state){
        return{
            loggbocks: props.loggbocks
        };
    }

    render(){
        return (
            <ul>
                {this.state.loggbocks &&
                this.state.loggbocks.map(loggbock =>
                    <LoggBockRowItem
                    key={loggbock.key}
                    id={loggbock.id}
                    datum={loggbock.datum}
                    tid={loggbock.tid}
                    skift={loggbock.skift}
                    anläggningsdel={loggbock.anläggningsdel}
                    orsak={loggbock.orsak}
                    driftstatus={loggbock.driftstatus}
                    beskrivning={loggbock.beskrivning}
                    plats={loggbock.plats}
                    rapporterare={loggbock.rapporterare}
                    
                    onClick={console.log(loggbock.key)} 
                    />
                )}
            </ul>
        )

    }
}

im trying to interact with the clicked item of type LoggBockRowItem in the list of loggbocks to use and change the items value. Ive tried using the props.onClick inside the CardRows component but it dosent do anything, any help would be appreciated

>Solution :

<LoggBockRowItem
  {...props}
  onClick={() => console.log(loggbock.key)} 
/>

or

const handleClick = (loggbock) => {}


<LoggBockRowItem
  {...props}
  onClick={() => handleClick(loggbock)}
/>

you should only bind a function to onClick event, other than an expression or invocation of a function