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");
}}
Answer from HudsonGraeme on Stack OverflowThere 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");
}}
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.
» npm install react-window-open
» npm install react-new-window
» npm install react-popout
You can use ReactDOM.createPortal to render a component in a new window as David Gilbertson explains in his post:
class MyWindowPortal extends React.PureComponent { constructor(props) { super(props); // STEP 1: create a container <div> this.containerEl = document.createElement('div'); this.externalWindow = null; } render() { // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet return ReactDOM.createPortal(this.props.children, this.containerEl); } componentDidMount() { // STEP 3: open a new browser window and store a reference to it this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200'); // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window this.externalWindow.document.body.appendChild(this.containerEl); } componentWillUnmount() { // STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false // So we tidy up by closing the window this.externalWindow.close(); } }
The upvoted answer works great!
Just leaving a function component version here in case people are searching for that in the future.
const RenderInWindow = (props) => {
const [container, setContainer] = useState(null);
const newWindow = useRef(null);
useEffect(() => {
// Create container element on client-side
setContainer(document.createElement("div"));
}, []);
useEffect(() => {
// When container is ready
if (container) {
// Create window
newWindow.current = window.open(
"",
"",
"width=600,height=400,left=200,top=200"
);
// Append container
newWindow.current.document.body.appendChild(container);
// Save reference to window for cleanup
const curWindow = newWindow.current;
// Return cleanup function
return () => curWindow.close();
}
}, [container]);
return container && createPortal(props.children, container);
};
» npm install react-window-opener