Printing lists with unknown length - reason

Question

I've got a list(string) with an unknown length which I would like to render in my ReasonReact component. I've read that there is no built-in support for printing complex data structures. But how would one go about rendering a list in its component in a pure functional way without using Javascript? I've found a snippet that achieves this using recursion on pattern matching. I presume there must be an easier way as this seems like a rather often-used operation.
The Javascript equivalent of what I'm trying to achieve is Array.toString().

Answer 1

If I understand you correctly, there are two steps you want accomplished:
To create a string out of the list(string), preferably formatted in the same way Array.toString does, i.e. comma-separated without surrounding square brackets, and without using any JavaScript-specific APIs.
To render the string as a ReasonReact component.
Step 1: String conversion
This can be done using String.concat:
let myList = ["a", "b", "c"];
let myString = String.concat(", ", myList);
which will return "a, b, c"
Step 2: Render as ReasonReact component
Rendering strings in ReasonReact are done using ReasonReact.string. Here's a complete, runnable example of a component taking a prop items of type list(string) and rendering it in a <span> element.
module ListRenderer = {
let component = ReasonReact.statelessComponent("ListRenderer");
let make = (~items, _children) => {
...component,
render: _self =>
<span> {ReasonReact.string(String.concat(", ", items))} </span>
};
};
ReactDOMRe.renderToElementWithId(<ListRenderer items=["a", "b", "c"] />, "preview");
Playground link