my jsx functions are not translating.

[DanSallau]

Please help . I installed this wonderfull tool following instructions from here https://www.npmjs.com/package/babel-plugin-incremental-dom. I had my webpack.config settings below.

 module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.js$/,
                include: [path.resolve(__dirname, 'src', 'js')],
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015']
                }
            },
            {
                loader: 'style!css',
                test: /\.css$/,
                include: [path.resolve(__dirname, 'src', 'css')]
            }
        ]
    }

I then added .babelrc after installing the plugins. The problem is, none of my jsx functions is translated into incremental-dom. Below is one of them in the file view.js.

function myRedner(items) {
    return `<ul class="filter">${items}</ul>`;
}

I was expecting the above to the translated into incemental-dom yet it doesn't. ITs translated into js by babel. Please why isn't it working and how do i fix it ANy helpw ould be appreciated.

[jridgewell]

You have two issues that I can see:

1. You need to include incremental-dom in the list of Babel plugins.

2. Your render functions aren't returning JSX, they're returning strings that have JSX in them. That's not the same thing.

   function myRedner(items) {
    // This returns a String
    return `<ul class="filter">${items}</ul>`;
   }
   
   function myRedner(items) {
    // This returns a JSX
    return <ul class="filter">{items}</ul>;
   }