How do i replace some text template with a custom JSX Component in ReactJS?
This is all about having translation text strings and implementing them in JSX.
Lets say I have two strings. One for english and another for spanish like this:
English
const phrase = `this is just a string with some [replace]weird[/replace] link inside`
Spanish
const phrase = `esto es solo un string con un [replace]raro[/replace] enlace dentro`
When I am in English mode the string will of course come as the first example.
I am trying to replace the [replace]word inside[/replace] with a component like this.
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, <Link to=linkurl >test</Link>)
>
The output is: this is just a string with some [object Object] link inside
This one works fine, using just plain html tags
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<b>$1</b")
>
</p>
the output is: this is just a string with some weird link inside
I've also tried the following:
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<Link to=""+linkurl+"">$1</Link>")
>
</p>
the output is: this is just a string with some weird link inside
but the word 'weird' should be a link element, and it's not...
By the way the component is just a component from gatsby, it allows you to navigate with routing (currently using reach router).
string reactjs jsx gatsby template-strings
asked Nov 11 '18 at 19:09
zebnat
394111
add a comment |
This is all about having translation text strings and implementing them in JSX.
Lets say I have two strings. One for english and another for spanish like this:
English
const phrase = `this is just a string with some [replace]weird[/replace] link inside`
Spanish
const phrase = `esto es solo un string con un [replace]raro[/replace] enlace dentro`
When I am in English mode the string will of course come as the first example.
I am trying to replace the [replace]word inside[/replace] with a component like this.
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, <Link to=linkurl >test</Link>)
>
The output is: this is just a string with some [object Object] link inside
This one works fine, using just plain html tags
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<b>$1</b")
>
</p>
the output is: this is just a string with some weird link inside
I've also tried the following:
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<Link to=""+linkurl+"">$1</Link>")
>
</p>
the output is: this is just a string with some weird link inside
but the word 'weird' should be a link element, and it's not...
By the way the component is just a component from gatsby, it allows you to navigate with routing (currently using reach router).
string reactjs jsx gatsby template-strings
asked Nov 11 '18 at 19:09
zebnat
394111
The problem is JSX code<Link to=linkurl >test</Link>will get converted toReact.CreateElement(...)and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google forreact to html
– Oleksandr Fedotov
Nov 11 '18 at 19:20
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45
add a comment |
This is all about having translation text strings and implementing them in JSX.
Lets say I have two strings. One for english and another for spanish like this:
English
const phrase = `this is just a string with some [replace]weird[/replace] link inside`
Spanish
const phrase = `esto es solo un string con un [replace]raro[/replace] enlace dentro`
When I am in English mode the string will of course come as the first example.
I am trying to replace the [replace]word inside[/replace] with a component like this.
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, <Link to=linkurl >test</Link>)
>
The output is: this is just a string with some [object Object] link inside
This one works fine, using just plain html tags
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<b>$1</b")
>
</p>
the output is: this is just a string with some weird link inside
I've also tried the following:
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<Link to=""+linkurl+"">$1</Link>")
>
</p>
the output is: this is just a string with some weird link inside
but the word 'weird' should be a link element, and it's not...
By the way the component is just a component from gatsby, it allows you to navigate with routing (currently using reach router).
string reactjs jsx gatsby template-strings
asked Nov 11 '18 at 19:09
zebnat
394111
This is all about having translation text strings and implementing them in JSX.
Lets say I have two strings. One for english and another for spanish like this:
English
const phrase = `this is just a string with some [replace]weird[/replace] link inside`
Spanish
const phrase = `esto es solo un string con un [replace]raro[/replace] enlace dentro`
When I am in English mode the string will of course come as the first example.
I am trying to replace the [replace]word inside[/replace] with a component like this.
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, <Link to=linkurl >test</Link>)
>
The output is: this is just a string with some [object Object] link inside
This one works fine, using just plain html tags
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<b>$1</b")
>
</p>
the output is: this is just a string with some weird link inside
I've also tried the following:
<p dangerouslySetInnerHTML=
__html: phrase.replace(/[replace](.*)[/replace]/, "<Link to=""+linkurl+"">$1</Link>")
>
</p>
the output is: this is just a string with some weird link inside
but the word 'weird' should be a link element, and it's not...
By the way the component is just a component from gatsby, it allows you to navigate with routing (currently using reach router).
string reactjs jsx gatsby template-strings
string reactjs jsx gatsby template-strings
asked Nov 11 '18 at 19:09
zebnat
394111
asked Nov 11 '18 at 19:09
zebnat
394111
edited Nov 16 '18 at 14:28
asked Nov 11 '18 at 19:09
zebnat
394111
asked Nov 11 '18 at 19:09
zebnat
394111
asked Nov 11 '18 at 19:09
zebnat
394111
394111
The problem is JSX code<Link to=linkurl >test</Link>will get converted toReact.CreateElement(...)and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google forreact to html
– Oleksandr Fedotov
Nov 11 '18 at 19:20
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45
add a comment |
The problem is JSX code<Link to=linkurl >test</Link>will get converted toReact.CreateElement(...)and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google forreact to html
– Oleksandr Fedotov
Nov 11 '18 at 19:20
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45
The problem is JSX code
<Link to=linkurl >test</Link> will get converted to React.CreateElement(...) and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google for react to html– Oleksandr Fedotov
Nov 11 '18 at 19:20
The problem is JSX code
<Link to=linkurl >test</Link> will get converted to React.CreateElement(...) and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google for react to html– Oleksandr Fedotov
Nov 11 '18 at 19:20
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45
add a comment |
1 Answer
1
active
oldest
votes
This is pretty easy to do if you treat your text templates as Markdown:
- Replace keywords with Markdown link syntax (
[linked phrase](https://www.example.com/)) - Run the markdown through markdown-to-jsx to convert it to JSX
- Use the
overridesoption to use a custom component withatags (e.g. a wrapper that extracts thehrefand provides it as thetoprop on Gatsby'sLink).
If you want a leaner pipeline, you could piece something together with dangerouslySetInnerHTML but it won't be as flexible or easily sanitized.
Example code:
import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ( children, linkUrl ) => (
<Markdown
options=
overrides:
replace: Link,
,
>
children
.replace("[replace]", `<replace to=$linkUrl>`)
.replace("[/replace]", "</replace>")
</Markdown>
)
And in use:
<MagicText linkUrl="https://www.example.com/">phrase</MagicText>
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252212%2fhow-do-i-replace-some-text-template-with-a-custom-jsx-component-in-reactjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is pretty easy to do if you treat your text templates as Markdown:
- Replace keywords with Markdown link syntax (
[linked phrase](https://www.example.com/)) - Run the markdown through markdown-to-jsx to convert it to JSX
- Use the
overridesoption to use a custom component withatags (e.g. a wrapper that extracts thehrefand provides it as thetoprop on Gatsby'sLink).
If you want a leaner pipeline, you could piece something together with dangerouslySetInnerHTML but it won't be as flexible or easily sanitized.
Example code:
import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ( children, linkUrl ) => (
<Markdown
options=
overrides:
replace: Link,
,
>
children
.replace("[replace]", `<replace to=$linkUrl>`)
.replace("[/replace]", "</replace>")
</Markdown>
)
And in use:
<MagicText linkUrl="https://www.example.com/">phrase</MagicText>
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
add a comment |
This is pretty easy to do if you treat your text templates as Markdown:
- Replace keywords with Markdown link syntax (
[linked phrase](https://www.example.com/)) - Run the markdown through markdown-to-jsx to convert it to JSX
- Use the
overridesoption to use a custom component withatags (e.g. a wrapper that extracts thehrefand provides it as thetoprop on Gatsby'sLink).
If you want a leaner pipeline, you could piece something together with dangerouslySetInnerHTML but it won't be as flexible or easily sanitized.
Example code:
import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ( children, linkUrl ) => (
<Markdown
options=
overrides:
replace: Link,
,
>
children
.replace("[replace]", `<replace to=$linkUrl>`)
.replace("[/replace]", "</replace>")
</Markdown>
)
And in use:
<MagicText linkUrl="https://www.example.com/">phrase</MagicText>
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
add a comment |
This is pretty easy to do if you treat your text templates as Markdown:
- Replace keywords with Markdown link syntax (
[linked phrase](https://www.example.com/)) - Run the markdown through markdown-to-jsx to convert it to JSX
- Use the
overridesoption to use a custom component withatags (e.g. a wrapper that extracts thehrefand provides it as thetoprop on Gatsby'sLink).
If you want a leaner pipeline, you could piece something together with dangerouslySetInnerHTML but it won't be as flexible or easily sanitized.
Example code:
import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ( children, linkUrl ) => (
<Markdown
options=
overrides:
replace: Link,
,
>
children
.replace("[replace]", `<replace to=$linkUrl>`)
.replace("[/replace]", "</replace>")
</Markdown>
)
And in use:
<MagicText linkUrl="https://www.example.com/">phrase</MagicText>
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
This is pretty easy to do if you treat your text templates as Markdown:
- Replace keywords with Markdown link syntax (
[linked phrase](https://www.example.com/)) - Run the markdown through markdown-to-jsx to convert it to JSX
- Use the
overridesoption to use a custom component withatags (e.g. a wrapper that extracts thehrefand provides it as thetoprop on Gatsby'sLink).
If you want a leaner pipeline, you could piece something together with dangerouslySetInnerHTML but it won't be as flexible or easily sanitized.
Example code:
import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ( children, linkUrl ) => (
<Markdown
options=
overrides:
replace: Link,
,
>
children
.replace("[replace]", `<replace to=$linkUrl>`)
.replace("[/replace]", "</replace>")
</Markdown>
)
And in use:
<MagicText linkUrl="https://www.example.com/">phrase</MagicText>
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
edited Nov 13 '18 at 15:22
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
answered Nov 12 '18 at 18:33
coreyward
49.4k1595124
49.4k1595124
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
add a comment |
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
I'm glad you understood my problem! This solution looks neat. I will try that in a few hours and see if it works like charm
– zebnat
Nov 13 '18 at 14:14
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
All right! I can confirm this works like a charm
– zebnat
Nov 16 '18 at 14:23
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
Fantastic, thanks for reporting back!
– coreyward
Nov 16 '18 at 15:10
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252212%2fhow-do-i-replace-some-text-template-with-a-custom-jsx-component-in-reactjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The problem is JSX code
<Link to=linkurl >test</Link>will get converted toReact.CreateElement(...)and it's in the end indeed the object, which you can see as the result. Check: stackoverflow.com/questions/19266197/reactjs-convert-to-html or maybe google forreact to html– Oleksandr Fedotov
Nov 11 '18 at 19:20
the question is, why do you need to add a JSX object in the variable? It would be easier to try to add the component and just replace either the url, or the text, or whatever. Is there a specific use case that you have so we can suggest an alternative?
– c-chavez
Nov 11 '18 at 19:32
@c-chavez I can agree with the argument, on the other hand sometimes you really need to replace JSX with static markup. Here is more info to the topic: medium.com/@arkadiusz.machalica/…
– Oleksandr Fedotov
Nov 11 '18 at 19:35
@c-chavez these strings come from a db, translated by other ppl (i just used a random phrase here as example). Sometimes you need a hyperlink in between the words of a phrase or pharagraph that varies depending on the language, so we just use simple template format and then replace it with the proper html code. But we are talking with React+Gatsby here.
– zebnat
Nov 11 '18 at 21:44
I managed to "make it work", at least make it render the anchor from the gatsby <Link> component by using `ReactDOMServer.renderToString(<Link to="/">anchor</Link>) but Reach Router from Gatsbyjs is not picking up the Link with JS, so everytime i click the link it reloads the entire page instead of navigating with js... it can render the <a> anchor element w/o problems.
– zebnat
Nov 11 '18 at 21:45