A href in a state value

React
1

Hi,

i want to set a text in the state object and use this text later for a component. This text has a <a href> but in the rendered DOM the a href is displayed as text. How can i get a link?

class ClickMe extends React.Component {
  state = {
    text: 'Hi, <a href="#" target="_blank" rel="noopener nofollow">click me</a>.'
  }
  render() {
    return (
            <p>{this.state.text}</p>
    );
  }
}

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

I use the course “Mastering React”. Is there a video which answers this, please refer to it.

Best regards
René

2

This works. But is it best practice?

state = {
    text: <React.Fragment>Hi, <a href="#" target="_blank" rel="noopener nofollow">click me</a>.</React.Fragment>
  }

Best regards
René