Redux variable text with html context

Question

I am trying to get the text on my page from redux state, so it can be easy changed in my backend, but the problem is that i can't use html context in this state. If i use this on my page it works fine:

some text<Link to="/contact">contact</Link>more text

but whenever i use:

{Somevariablefromstate}

with this in it: some text<Link to="/contact">contact</Link>more text it doesn't make it a link its just plain text, is there a way to prevent this?

I hope i explained it well enough to make it understandable!

Don't use HTML as strings, generate the correct JSX when rendering, unless you're receiving the HTML strings from somewhere else. — Emile Bergeron, Nov 15 '19 at 15:06
@EmileBergeron I am indeed receiving the html string from somewhere else — istvan kolkert, Nov 15 '19 at 15:10
@EmileBergeron I dont think it will work with your example because dangerouslysetinnerhtml doesn't work with link — istvan kolkert, Nov 15 '19 at 15:47
It works with anything that is HTML, though, it would definitely fail if you want a React router link... — Emile Bergeron, Nov 15 '19 at 15:54
Also, you should provide a [mcve] in your question. It looks like an XY problem. — Emile Bergeron, Nov 15 '19 at 16:01
Well i did say it was the React link was not working, so is it possible to solve it another way without dangerouslysetinnerhtml? I am not that experianced with react so sorry for the confusion — istvan kolkert, Nov 15 '19 at 21:25

Wojciech Dynus · Accepted Answer · 2019-11-15T17:59:28.437

0

<Link> is a component which will be transformed to valid HTML - most likely some <a> link. You should probably have <a href="/contact">contact</a> as a value of Somevariablefromstate variable. Plus you should most likely use https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html for your  element so this should look like that: 

edited Nov 15 '19 at 17:59

answered Nov 15 '19 at 15:05

Wojciech Dynus

881
5
11

I tried that, it doesn't show – istvan kolkert Nov 15 '19 at 15:13
It looks like Link doesn't work with dangerouslysetinnerhtml – istvan kolkert Nov 15 '19 at 15:28
I didn't see the preview of my response and it was missing most of I wrote as syntax was the same as StackOverflow. Sorry for that and hope that ma answer is clear now – Wojciech Dynus Nov 15 '19 at 18:01
A yea now it makes a lot more sense, thank you! although using an link would kinda remove the usefullness of using react router – istvan kolkert Nov 15 '19 at 21:26
1

Better option would be to send object containing for instance name and href like this: {name: "contact", href: "/contact"} Then with that data you can return {link.name}. This will be able to generate only links though. Maybe there is sone way to get jsx code and transform it to valid html on the fly but that would be hacky – Wojciech Dynus Nov 16 '19 at 10:56

Redux variable text with html context

1 Answers1