React - use window.open to open a URL from a variable

Question

Sorry, if this is a stupid question, but I'm just trying to have a URL entered into a field and then a button that, when clicked, will take the value in that field and open a new tab to that URL. If I do this:

    onClick={event => {
                      event.preventDefault();
                      window.open('https://www.google.com/', '_blank');
    }}

Then it works just fine and opens a new tab with the specified url.

But if I set urlText = "https://www.google.com/" and do this:

onClick={event => {
                   event.preventDefault();
                   window.open({urlText},'_blank');
}}

Then it opens a new tab, but it goes to this instead:

http://theCurrentWebsiteDomain/[object%20Object]

I assume it's trying to add the urlText to the end of the current domain, like it's a page that I'm specifying instead of a whole new URL.

I added a console.log and it displays urlText just fine. If I click on it from the console, it goes right to the expected website.

What am I doing wrong?

Have you tried to pass the urlText without curly braces? I think it expects the value as a string: window.open(urlTex},'_blank'); — sergioviniciuss
– sergioviniciuss, Commented Jul 27, 2022 at 0:00

HudsonGraeme · Accepted Answer · 2022-07-27 00:16:53Z

6

There is no need to add the curly braces around your urlText variable since it's within the event callback function. If it were to be used in the JSX then curly braces would be required (like <div>{urlText}</div> or <input type="text" value={urlText} />) - but since you're calling a function there is no need to wrap the variable name in curly braces.

The error is caused because by wrapping the urlText variable in curly braces, you are converting urlText to an object: { urlText: "foo" } and thus it appears as [object%20Object] in the URL bar since any object converted to a string will be literally '[object Object]'.

onClick={(event) => {
  event.preventDefault();
  window.open(urlText, "_blank");
}}

answered Jul 27, 2022 at 0:16

HudsonGraeme

5255 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nova Over a year ago

Yes, you all were right. window.open(urlText, "_blank"); worked perfectly. Thanks!

Indigo · Accepted Answer · 2022-07-27 00:19:43Z

1

Simply pass the string urlText directly into the function: window.open(urlText, '_blank') without curly brackets.

The curly brackets is syntax to create an object, this function takes in a string argument as its first parameter. So javascript parses your argument into a string [object%20Object], and due to there being no protocol in that it recognises it as a local path.

answered Jul 27, 2022 at 0:19

Indigo

1791 gold badge3 silver badges13 bronze badges

Comments

Mekha L · Accepted Answer · 2024-04-25 16:25:57Z

1

I encountered a similar issue when using window.open(), where the localhost was being appended to the URL, resulting in a format like http://localhost:3000/{url}.

  const handlePreview = (url) => {
    window.open(url, '_blank');
  };

To resolve this issue, I prefixed the URL with https:// as a quick workaround:

  const handlePreview = (url) => {
    window.open(`https://${url}`, '_blank');
  };

This modification ensured that the URL opened correctly without the unwanted localhost prefix.

answered Apr 25, 2024 at 16:25

Mekha L

113 bronze badges

Collectives™ on Stack Overflow

React - use window.open to open a URL from a variable

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related