1

I'm trying to add a URL link to the string but for some reason I can't get it to display. Is there a way to add a anchor link to the alerts? I'm using antd to display the alerts.

enter image description here

class Settings extends PureComponent {
  state = {
    inValid:
      "This is a message because you haven't verified your email. If you haven't so, please click here to Verify Email`<a href=\"http://bing.com\">Bing</a>.`"
  };

  render() {
    const { inValid } = this.state;
    return (
      <AppLayout>
        <Container>
          <Row>
            <Alert
              message="Verify Email"
              description={inValid}
              type="warning"
              showIcon
            />
            <br />
            <SettingsTabs />
          </Row>
        </Container>
      </AppLayout>
    );
  }
}
Arthur Truong
  • 2,044
  • 3
  • 9
  • 15
  • check out this example of them escaping the html nodes :) https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component – sjdm Jan 10 '19 at 06:26

1 Answers1

4

According to the documentation the description property accepts either a string or a ReactNode. Therefore you can try to define a ReactNode instead of a string that contains a Link component, e.g:

state = {
    inValid: (
        <div>This is a message because you haven't verified your email. If you haven't so, please click here to Verify Email <Link href="http://bing.com">Bing</Link>.</div>
    )
};
antonku
  • 7,377
  • 2
  • 15
  • 21