How to replace a word with a link

I need to replace a word and insert a link instead. An example of how I want to do:

const text = "Edit src/App.js and save to reload."

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        {text.replace("Edit", <a
          className="App-link"
          href="https://reactjs.org"
          target="_new"
          rel="noopener noreferrer"
        ></a>)}
      </p>
    </header>
  </div>
);

Answer

The JS function string.replace() expects two string parameters, but instead of the second string you supply a JSX <a> element.

Note that JSX is definitely not text, it may just look like it if you are not used to it. All JSX tags are translated into calls to React.createElement(), the result of which is a React object and not a string.

To solve it, you need to convert the string into parts, modify what needs modifying (while making sure that the React key requirement for items in a collection is fulfilled), then render the result, as in the following demo:

class Home extends React.Component {
  render() {
    const logo = null;
    const text = "Edit src/App.js and save to reload."

    // Create array:
    const parts = text.split(" ");

    // Modify array to contain JSX elements: one link, the rest Fragments, because every item
    // in a collection needs a key to prevent React warnings.
    // Also manually inserted back the spaces that went missing due to the split operation.
    for (let i = 0; i < parts.length; i++) {
      if (parts[i] === "Edit")
        parts[i] = <a key={i} className="App-link" href="https://reactjs.org" target="_new" rel="noopener noreferrer">Edit</a>;
      else
        parts[i] = <React.Fragment key={i}>{" " + parts[i]}</React.Fragment>;
    }

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            {parts}
          </p>
        </header>
      </div>
    );
  }
}

ReactDOM.render(<Home />, document.getElementById('react'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>