ReactJS - Construct html from mapping - reactjs

Question

I found the solution I wanted and it works, see below.....
I know I am doing something stupid but I am having a mental block this morning and would appreciate some help. I am trying to construct html from a mapping:
In my render:
< ul>
{ arryItems.map(this.foo.bind(this)) }
< /ul>
Calling function:
foo(arry, i) {
let result = '';
if (arry.children != undefined && arry.children.length > 0) {
result= (
<div key= {i}>{arry.name}
{arry.children.map(function(child, ix){
<p key= {ix}>{child.name}</p>
})}
</div>
)
} else {
result = (<div>{arry.name}</div>)
}
return result;
};
I am trying to return back html.
While I am receiving no error, the < p>{child.name}< /p> is not in the return html result.
Can anyone point out what is so blatantly obvious with my thinking that I cannot figure this out?

Answer 1

So you want to render a component to an html string? React does this with renderToString. e.g:
var Task = React.createClass({
render() {
return (
<li>{this.props.task.text}</li>
);
}
});
var Tasks = React.createClass({
getTasks() {
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task 3' }
];
},
renderTasks() {
return this.getTasks().map(task => {
return <Task key={task._id} task={task} />;
});
},
render() {
return (
<ul>
{this.renderTasks()}
</ul>
);
}
});
var html = ReactDOMServer.renderToString(Tasks);
Note that since 0.14 this method has been split out to react-dom/server package, earlier versions it's just in the react package.

Answer 2

I appreciate Dominic's help but I like my solution better, as it is compact and it checks if there are no children:
foo(arry, index) {
let children = this.getChildren(arry)
return (
<div key={index}>{arry.name}
{ children }
</div>
)
}
getChildren(arry){
let result = [];
if(arry.children != undefined && arry.children.length > 0){
arry.children.map(function(child, ix){
result.push(<p key={ix}>{child.name}</p>)
})
}
return result;
}
render() {
return (
<section>
{ arryItems.map(this.foo.bind(this)) }
</section>
);
}