Making a whole div have a dynamic href link- React

JavaScript
1

Good afternoon free code camp! I’ll get right to the point.
I have an app that dynamically renders a div based off of what is in the array. I am having trouble with one part though. I want to make the entire div a hyperlink so you can click on it and go to its corresponding page.

export const MenuItem = ({title, imageUrl, timePeriod, size, linkUrl}) => (
<div style={{
   backgroundImage: `url(${imageUrl})`
}} className={`${size} menu-item`}>

<div className="content" href={linkUrl} > 
   <h1 className="title">{title}<br /> </h1> <p className="year">{timePeriod}</p>
   <span className="subtitle">Shop for books and repilcas</span>
   
</div>
</div>

This is where the rendering is done and everything except the href is looking just fine.

title: 'Neolithic Era',
          imageUrl: (cut for space) 
          timePeriod: "10,000–4,500 BC",
          id: 1,
          linkUrl: '/neolithic'

and this is what the array looks like, just in case that’s where my error is.
Any help would be appreciated, thank you.

2

you can’t use the href attribute on a div element.
to make a whole div a link you need to wrap div element within an anchor element i.e.

<a href={linkUrl}>
<div>...........</div>
</a>
1 Like
3 
import React from 'react'

export const MenuItem = ({title, imageUrl, timePeriod, size, linkUrl}) => (

<a className="content" href={linkUrl} >
<div style={{
   backgroundImage: `url(${imageUrl})`
}} className={`${size} menu-item`}>

<div> 
   <h1 className="title">{title}<br /> </h1> <p className="year">{timePeriod}</p>
   <span className="subtitle">Shop for books and repilcas</span>
   
</div>
</div>
</a>

)

So I tried this and it ruined my whole page’s CSS. I was hoping there was another way of doing that.

4

Also the a tag didn’t function, the text turned blue but it did not work as a link.

5

This is just HTML: if you want a url link, you have to use a link element, you can’t get around this and you can’t put href attributes on arbitrary elements.

Re it not working, it would be helpful if you could explain what you’re trying to do: if it’s an external link, it would open an external link in the browser, it’s just HTML. If it’s an internal link to an element with a matching ID, it won’t do anything if there isn’t a matching ID

6

It is an internal link that is another react component. The path does exist.

<Route path="/Neolithic" component={Neolithic} />

My main issue is trying to get the whole div to be clickable to link to this page.

7

Nevermind! I found a tutorial that explains this. Sorry to have made a topic about it.
For others who are having the same problem, google “React withRouter()”

1 Like
8

You’re conflating two things here. You’re using an internal routing system designed to load in React components on the same page but make the browser think you are navigating to a different url. But you’re trying to make it work like a single HTML page.

  • if you want to use react router here, use react router. It provides a wrapper around <a> components called <Link> that would give you what you want: <Link to="/path/defined/in/routes" >.
  • if you literally want to scroll to a component, like href="#my-component" on an anchor, you have to have it all rendered on the page: as I said, it’s just HTML. You don’t use the router here, that’s not what it’s for.
    <a href="#example">Scroll to example</a>

....further down page

<div id="example">
1 Like
9

Thanks … it worked in my React project

1 Like
10

so the solution is to use withRouter

withRouter makes a HOC which gives access to history

import { withRouter } from "react-router-dom";

const ProductItem = ({productUrl, history}) => 
(<div className='card' 
      onClick={() => history.push(productUrl)}>
</div>)

export default withRouter(ProductItem);