click an image for outside url react.js

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.


1.You can first declare in the state

load:false 

2.use the onClick event and call a function like -

<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />
  1. Inside the function set load to true.
  2. Now check the value of the load to direct to whatever you need. I hope it works.