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();
  }
}

You are on the right way!

Is it something you need? I prepared the example: click here

var Example = React.createClass({
    fbShare: function() {
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Fb Share&p[summary]=Facebook share popup&p[url]=javascript:fbShare("http://jsfiddle.net/stichoza/EYxTJ/")&p[images][0]="http://jonbennallick.co.uk/wp-content/uploads/2012/08/Facebook-logo-ICON-02.png"', 'sharer', 'toolbar=0,status=0,width=548,height=325');
    },

    render: function() {
        return (<div>
            <img src="http://pasadenainstitute.com/fb-shareTransp122x42.png" onClick={this.fbShare} />
        </div>);
    }
});

ReactDOM.render(
    <Example />,
    document.getElementById('container')
);

New Solution based on CreatePortal

import React, { useEffect, useCallback, useMemo, useState } from "react";
import { render, createPortal } from "react-dom";

const App = () => {
  const [isOpen, setOpenState] = useState(false);
  const open = useCallback(() => setOpenState(true));
  const close = useCallback(() => setOpenState(false));

  return (
    <div>
      <h1>Portals in React</h1>
      <button onClick={open}>Open</button>
      <button onClick={close}>Close</button>
      {isOpen && (
        <NewWindow close={close}>
          Example <button onClick={close}>Close</button>
        </NewWindow>
      )}
    </div>
  );
};

const NewWindow = ({ children, close }) => {
  const newWindow = useMemo(() =>
    window.open(
      "about:blank",
      "newWin",
      `width=400,height=300,left=${window.screen.availWidth / 2 -
        200},top=${window.screen.availHeight / 2 - 150}`
    )
  );
  newWindow.onbeforeunload = () => {
    close();
  };
  useEffect(() => () => newWindow.close());
  return createPortal(children, newWindow.document.body);
};

render(<App />, document.getElementById("root"));

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");
}}