We Keep Coding

Rendering React components from an HTML string

I'm getting an HTML string from an AJAX request, that looks something like that:
<div> <SpecialComponent/> <SecondSpecialComponent/></div>
What i need, is to be able use this string in a React component, as it were valid JSX.
I tried using the dangerouslySetInnerHTML as instructed in this discussion:
how-to-parse-html-to-react-component
I've also tried React libraries like react-html-parse and html-react-parser. No success
When i was working with AngularJS(1), i was using some small directive that would take care of that situation. I need to achieve the same with React.
Any ideas?
EDIT: if anybody is interested, i found a library that takes care of the issue:
https://www.npmjs.com/package/react-jsx-parser

You're not supposed to be doing things this way. Although React components look like html tags when using JSX, they are actually either classes or functions. What you're trying to do is equivalent to trying to parse:
"<div>document.write('foo')</div>"
You're literally mixing a javascript function name in string form with html markup in the same string. You will have to parse the string to separate the React component from the surrounding html markup, map the React components in string form to their actual React counterparts, and use ReactDOM.render to add the component to the page.
let mapping = [
{"name":"<SpecialComponent/><SecondSpecialComponent/>","component":<SpecialComponent/><SecondSpecialComponent/>},
{"name":"<someOtherComponent/><someOtherComponent/>","component":<someOtherComponent/><someOtherComponent/>}
];
let markup = "<div><SpecialComponent/><SecondSpecialComponent/></div>";
let targetComponent;
mapping.forEach((obj) => {if(markup.indexOf(obj.name)>-1){
targetComponent=obj.component;//acquired a reference to the actual component
markup.replace(obj.name,"");//remove the component markup from the string
}
});
/*place the empty div at the target location within the page
give it an "id" attribute either using element.setAttribute("id","label") or
by just modifying the string to add id="label" before the div is placed in
the DOM ie, <div id='label'></div>*/
//finally add the component using the id assigned to it
ReactDOM.render(targetComponent,document.getElementById("label"));
Never tried this before. I wonder if this will actually work :)

my suggestion is you do something like the following.
first set a state variable to equal the HTML you want to return
this.setState({html: response.data.html})
then in your return you can do the following
return (
{this.state.html}
);

Passing HTML in JSON as data in Assemble

I am working on a project that requires multilanguage support. I decided to utilize Assemble (more specifically grunt-assemble) since it was already part of the project toolbox so my current setup uses JSON file(s) as data/text input for handlebar templates.
The site is responsive and there is a requirement to have certain level of control over text using break lines <br /> or non-breaking spaces to avoid orphaned words. Some sentences require mentioned tag or html entity to be included in the string otherwise I'd be forced to split sentence word by word and combine hardcoded html with json data reference. Imagine something like this:
<p>{{word_1}}<br />{{word_2}}</p>
This approach is also not very translation friendly, since a different language might not require line break at all.
To avoid this I've tried to pass html via JSON like this:
{ "sentence" : "word<br />word" }
Assemble output, however, is literal, so instead or of functional tag I get its string version and page literally displays word<br />word. Same for
What is (if any) proper notation for passing html tags or entities from JSON to handlebar templates via Assemble?

Handlebars escapes HTML by default, but you can avoid escaping with the triple-stash format {{{ }}}. Take a look at the following .hbs page:
---
title: Test
htmlData: This is some <br/> html in data
---
<p>double-stash: {{htmlData}}</p>
<p>triple-stash: {{{htmlData}}}</p>
results in:
double-stash: This is some <br/> html in data
triple-stash: This is some
html in data

Return Subscript in JSON

I am trying to return a JSON object via AJAX using jQuery, that may contain elements that need HTML Tags. It is not great practice to include HTML tags within a JSON response and even so, it will be encoded at the other end so may cause more problems.
Consider this result:
{
"Country_Code":"EL",
"Country_Name":"Greece",
"Total_Value":5,
"Formatted_Value":"5m3"
}
The 'Formatted_Value' needs to look like this: 5m3. My question is simply, what would be the best way to achieve this with a returned JSON object?
If HTML is the best way then I will implement this, but only as a last resort as returning markup in a JSON request is not very good.

you could change the Json in this way:
"Formatted_Value":"5m³"
Using ³ (³) entity: http://code.google.com/p/doctype-mirror/wiki/Sup3CharacterEntity

Show xml in current/new window

I have a view displaying data from a model. My model contains a string property which is actually some xml. I would like to display this xml in my view in a simple div (or in a new page) but it's important to have it nicely formatted so it's easily readable to the user.
What would be the best way to accomplish this?

You can fromat it using XElement.Parse(yourString):
string niclyformattedXml = XElement.Parse(unformattedString).ToString();

Assuming the XML string is already nicely formatted with tabs you can render it in a <pre></pre> tag.
You can simply output the string in there using <%: Model.XmlValue %> or #Model.XmlValue (to ensure angle-brackets etc are HTML-encoded).
Use a bit of CSS then to control text size etc.
If it's not already formatted then you could load it into an XElement and then call the ToString(SaveOptions) method - which in default mode will use indenting.

#model MyViewModel
...
<pre>#XElement.Parse(Model.SomeStringPropertyContainingXml)</pre>

Business data in webpage: where and how to store it?

I need business data inside my HTML pages. This data is not directly related to the DOM, but is used to handle javascript (and/or jquery) operations on the DOM. For example I shoud know that an object with id=100 holds objects with ids 1001, 1002 and 1003.
object (id=1000) = {1001,1002,1003}
I've been asking around but I hear different ideas.
Some solutions so far now
A datalist.
<dl id="1000">
<dt>1001</dt>
<dt>1002</dt>
<dt>1003</dt>
</dl>
Classes from tags
<span id="1000" class="o_1001 o_1002 o_1003">
(or any other tag ?)
<dl id="1000" class="o_1001 o_1002 o_1003">
UPDATED : Not in HTML at all? Since it's about data that is needed for javascript I might just as well put it directly in javascript?
<script>
var object = { id : 1000, value : [1000,1001,1002]; }
storeGlobal(object);
</script>
And storeGlobal would be a globar var in a js-script, that now also has the data.
Any ideas?

If the data is in some way related to some element(s) in the DOM, you could use jQuery.data(). It's a very nice and clean way of storing data in a page.
If it's not related to any DOM element, it's probably easiest to handle it completely in JS as an array/object.

If it's just data you will use in your javascript, write it as javascript and be done with it. Don't shove it into the DOM for no particular reason. You can either just have it as javascript literals (possibly generated by something like JSON.stringify on the server) or as a distinct JSON document your javascript retrieves via an ajax request.