Gatsbyjs and internal links

I am building a site in gatsbyjs. Just for seo, i think "onClick" is not crawlable. So maybe someone can help me.

I have this:

render={data => (
        <div className='feed'>
            {data.allContentfulBlog.edges.map(edge => (
                <div key={edge.node.id} className='card'
                style={{
                    backgroundImage: `linear-gradient(
                    to bottom, 
                    rgba(10,10,10,0) 0%,
                    rgba(10,10,10,0) 50%,
                    rgba(10,10,10,0.7) 100%),
                    url(${edge.node.featuredImage.fluid.src})`
                }}
            onClick={() => navigate(`/blog/${edge.node.slug}`)} >
            {edge.node.category.map(category => (
                <p className='card__category'>{category.title}</p>
            ))}
            <p className='card__title'>{edge.node.title}</p>
            </div>
            ))}
        </div>
     )}

First question: So how can i remove "onClick" for <a href=''></a>

I need "${edge.node.slug}" in the slug, i tried, but i dont know how to call it properly.

Second question: Its possible pass the category in the slug?

Example: example.com/travel/how-to-travel

Now i have: example.com/blog/how-to-travel (/blog/${edge.node.slug})

I tried a lot of things but... i couldnt.

THX

********************UPDATE*******************

render={data => (
        <div className='feed'>
            {data.allContentfulBlog.edges.map(edge => (
                <Link className='card' style={{
                  backgroundImage: `linear-gradient(
                  to bottom, 
                  rgba(10,10,10,0) 0%,
                  rgba(10,10,10,0) 50%,
                  rgba(10,10,10,0.7) 100%),
                  url(${edge.node.featuredImage.fluid.src})`
              }} to={`/blog/${edge.node.slug}`}>
            {edge.node.category.map(category => ( <p className='card__category'>{category.title}</p>  ))}
            <p className='card__title'>{edge.node.title}</p>
            </Link>
            ))}
        </div>
     )}

Now its working good, but i have a few questions

1- If i put {edge.node.category.map(category => ( {category.title} ))} doesnt work, "{category.title}" doesnt work. Why?

2-Why i need to write "{edge.node.category.map(category => (" for the category and i cant use "{category.title}" directly.

3- I deleted "key={edge.node.id}", whats the function?