Problem with rendering nested elements returned by a function.

[mthadley]

Given the following component:

import Component from 'metal-jsx';
import {range} from 'lodash';

class CoolList extends Component {
    renderMessage(index) {
        return <em>{`my message ${index}`}</em>;
    }

    render() {
        return (
            <ul>
                {
                    range(5).map(
                        index => <li key={index}>{this.renderMessage(index)}</li>
                    )
                }
            </ul>
        );
    }
}

...this is what I see rendered:

<ul>
  <em>my message 0</em>
  <em>my message 1</em>
  <em>my message 2</em>
  <em>my message 3</em>
  <em>my message 4</em>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

I noticed that if I make the following change, then the em is correctly rendered inside the li:

renderMessage(i) {
    // Return an array instead:
    return [<em>{`my message ${i}`}</em>];
}

Is this expected?

[mairatma]

Nope, not expected, thanks for reporting this!

This is actually an issue with the compiler we use from JSX to incremental dom, so I've opened up an issue there. They've been extremely helpful with issues like this, so it should be fixed soon :)

[mairatma]

This issue was moved to #6

[mairatma]

This issue was moved back.

[mairatma]

Just FYI, it seems like this problem has already been fixed by babel-plugin-incremental-dom (which has actually been renamed to babel-plugin-transform-incremental-dom).

Anyone using it directly just needs to update its version, but we should also update babel-preset-metal-jsx to use the new one now. I've created an issue there for this. We can close this once that's done and we've confirmed that the new version really fixes this issue.

If anyone wants to, feel free to grab this.