click an image for outside url react.js

Question

I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.

I am using React-Bootstrap which I don't know if that is going to change anything.

export default class Home extends Component {
render() {
    return (
        <Grid>
            <Jumbotron className="brainImg">
            </Jumbotron>
            <div class="footer"><center className="iconsBaby">
                <Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
                <Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
                <Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
            </center>
            </div>
        </Grid>
    )
}

Thank you for looking.

Answer 1

Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.

<a href="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</a>

OR with react-router Link

<Link to="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</Link>

This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.

Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.

Answer 2

Just wrap tag inside an like this:

   <a href="abc.com">
    <Image src="abc.png" />
   </a>

Or If you are using react-router,then you can do this:

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

   <Link to="www.abc.com">
   <Image src="abc.png" />
   </Link>

Hope this help: