CODEWITHSUNDEEP
reactjs
mireumireu
mireumireu

Reputation: 995

How to Insert hyperlink in React class container?

Thank you in advance for reading this question.

What I am trying to do is: to insert a URL hyperlink to that container's item class at the bottom.

So far, I used map to call the data I input from another file. And I struggle to find some example to implement the hyperlink in such case.

or I can say - no idea how I should start letting that src or href work in this situation.

Here is what I expected and did not work

            <div className="container">
                {data.map(db => (
                    <div className="item">
                        <img 
                            src={db.img}
                            alt=""
                            href="https://localhost:3000/" {/* here */}
                            />
                            <h3>{db.title}</h3>
                    </div>
                ))}
            </div>

I know that is obviously not going to work! - but I really have no idea whether I can try making some hyperlink feature in this 'item class' or I should work it from the file where I call these data (img, title).

In English, I want to let that img(clickable) redirects to the URL page which I set it.

I would be really appreciated if I can get some hint...

Please note: The entire code is below.

{/* Portfolio.jsx */}
import { useState, useEffect } from "react";
import PortfolioList from "../PortfolioList/PortfolioList";
import "./Portfolio.scss";
import { featuredPortfolio, 
    mobilePortfolio, 
    reactPortfolio } 
    from "../../data";




export default function Portfolio() {
    
    const [ selected, setSelected ] = useState("featured")
    const [ data, setData ] = useState([]);
    const list = [
        {
            id: "featured",
            title: "React.js"
        },
        {
            id: "mobile",
            title: "HTML/CSS"
        },
        {
            id: "react-movie",
            title: "media indexer"
        },
    ];

    useEffect(() => {
        
        switch(selected){
            case "featured":
                setData(featuredPortfolio);
                break;
            case "mobile":
                setData(mobilePortfolio);
                break;
            case "react-movie":
                setData(reactPortfolio);
                break;
            default:
                setData(featuredPortfolio);
        }
    }, [selected])
    
    return (
        <div className="portfolio" id="portfolio">
            <h1>Portfolio</h1>
            <ul>
                {list.map(item => (
                    <PortfolioList 
                        title={item.title} 
                        active={selected === item.id}
                        setSelected={setSelected}
                        id={item.id}
                    />
                ))}
            </ul>
            <div className="container">
                {data.map(db => (
                    <div className="item">
                        <img 
                            src={db.img}
                            alt=""
                            />
                            <h3>{db.title}</h3>
                    </div>
                ))}
            </div>
        </div>
    );
}

{/* PortfolioList.jsx */}
import "./PortfolioList.scss";

export default function PortfolioList({ id, title, active, setSelected }) {
    return (
        <li className={active ? "PortfolioList active" : "PortfolioList"}
        onClick={() => setSelected(id)}
        >
            {title}
        </li>
    );
}

Upvotes: 1

Views: 656

Answers (3)

codingwith3dv
codingwith3dv

Reputation: 369

This also happens in normal HTMl you can overcome this by enclosing the img inside an a tag like @Rodney Golpe said

<a href="<your-url>">
  <img
  <!--All your other code-->
  />
</a>

Upvotes: 2

Rodney G
Rodney G

Reputation: 4826

Have you tried wrapping the img inside an anchor tag?

<div className="item">
  <a href="https://localhost:3000/">
    <img src={db.img} />
  </a>
  <h3>{db.title}</h3>
</div>

Upvotes: 2

ryanadhi
ryanadhi

Reputation: 67

you can try this

<img
   src={db.img}
   alt=""
   onClick={() => window.open('http://yourlink.com')}
/>

Upvotes: 2

Related Questions