0

I want to have a button to go to Codepen. The thing is, when I try doing:

<button onClick="https://codepen.io">CodePen</button>

And click on the button, it doesn't do anything. By anything, I mean it doesn't go to the URL, or open a new tab to go to the site.

I also don't want to use React Router, because I tried to do this:

<Router>
    <Link to="https://codepen.io"/>
</Router>

And it gives me this error:

Error

My full code is here. Also I do have imports, I just replaced them with // Imports because there's way to many.

Wolfizzy
  • 581
  • 1
  • 4
  • 18

1 Answers1

1

<button onClick={() => window.location.href = 'https://codepen.io'}>CodePen</button>
wangdev87
  • 8,611
  • 3
  • 8
  • 31
  • I copied and pasted that code, and it still doesn't do anything. I tried it on Brave and Edge, and I still have that problem. – Wolfizzy Nov 06 '20 at 08:11
  • are you using react? – wangdev87 Nov 06 '20 at 08:12
  • Yes, I'm using React. I've also tried using a link, but I still can't do it. – Wolfizzy Nov 06 '20 at 08:15
  • i thought you are just trying it in the pure html, i just updated answer. – wangdev87 Nov 06 '20 at 08:16
  • This works, but what if I want to make it like: ``? I tried doing it but I can't. It redirects me to `http://localhost:3000/undefined`. – Wolfizzy Nov 06 '20 at 08:20
  • remove curly brace for the website.codepen. window.location.href = website.codepen – wangdev87 Nov 06 '20 at 08:24
  • It still gives `http://localhost:3000/undefined`. Also here's some example code of what I mean: https://pastecode.io/s/9w1un4g1ib – Wolfizzy Nov 06 '20 at 08:32
  • 1
    `website` is the array of the object, so maybe you need to use website[0].codepen – wangdev87 Nov 06 '20 at 08:34
  • That works...except this is my full code: pastecode.io/s/XhXbqb59bD so actually I can't do website[0].link because I have a template div card. Is it possible so it would be able to each have their own links for their own card? I can make 3 cards, but if there's another way, that'll be great. – Wolfizzy Nov 06 '20 at 10:30
  • looping variable inside map is the same - `website`, you may need to rename it like `website.map((w, index)`, and then use `onClick={() => window.location.href = w.link}` – wangdev87 Nov 06 '20 at 10:34
  • Thank you William! I copied Hao's code and then followed your suggestion of the array and it worked! – Wolfizzy Nov 06 '20 at 11:04