So I was wondering if I could add a method in my component so I could click the `h1` element to redirect to the respective `target.value` page by inserting an `onClick` event like the code below:

```
import React from 'react'
import CollectionItem from '../collection-item/collection-item.component'
import './collection-preview.styles.scss'
import { withRouter } from 'react-router-dom'

const CollectionPreview = ({ title, items, history }) => (
    <div className='collection-preview'>
        <h1 className='title' onClick={(event) => history.push(`/shop/${event.target.value}`)}>
            {title.toUpperCase()}
        </h1>
        <div className='preview'>
            {
                items
                    .filter((item, index) => index < 4)
                    .map((item) => (
                        <CollectionItem key={item.id} item={item} />))
            }
        </div>
    </div>
)

export default withRouter(CollectionPreview)

```

But it didnt work. The `event.target.value` always return `undefined`, even though when i tried to console log only the `event.target` , it normally return the `h1` element I was clicking. How could I fix this?