can't use variable containing html to set inner contents of tag.

[davidawad]

So I'm getting an error from babel when trying to use the DangerouslySet inner html for a div.
I'm using a gulpfile to watch my jsx files.

gulpfile:

const gulp = require('gulp');
const react = require('gulp-babel');
const babel = require('gulp-babel');

/* Path object for convenience */
var paths = {
  JSX: ['static/jsx/*.jsx'],
  JS:  ['static/js']
};

gulp.task('transform', () => {
    return gulp.src(paths.JSX)
        .pipe(babel({
            presets: ['react']
        }))
        .pipe(gulp.dest('static/js'));
});
gulp.task('watch', function(){
  gulp.watch(paths.JSX, ['transform']);
});
gulp.task('default', ['watch']);

So the problem is when I try to use the __html: in my code. It complains the tokens were unexpected.
local_events is an array that I'm mapping over to return list elements for each item in the list.
item.description is a string containing html

tags.

item.description: "

this is a paragraph that's not being interpreted as html but instead being rendered as literal text content which isn't what I was hoping

"

    return (
        <ul>
            {local_events.map(function(item) {
                console.log(item)
                return <li key={(item.time * Math.random())}> <div dangerouslySetInnerHTML={__html:item.description}/> <hr/> </li>
            })}
        </ul>
    )

Is this a React problem? Or is it Babel's linter? Stack trace is below.

[20:30:56] Starting 'transform'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/david/Desktop/meetup-project/static/jsx/Parent.jsx: Unexpected token (75:98)
  73 |             {local_events.map(function(item) {
  74 |                 console.log(item)
> 75 |                 return <li key={(item.time * Math.random())}> <div dangerouslySetInnerHTML={__html:item.description}/> <hr/> </li>
     |                                                                                                   ^
  76 |             })}
  77 |         </ul>
  78 |     )
    at Parser.pp.raise (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.expect (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/parser/util.js:85:33)
    at Parser.pp.jsxParseExpressionContainer (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:293:8)
    at Parser.pp.jsxParseAttributeValue (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:256:19)
    at Parser.pp.jsxParseAttribute (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:308:58)
    at Parser.pp.jsxParseOpeningElementAt (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:319:31)
    at Parser.pp.jsxParseElementAt (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:341:29)
    at Parser.pp.jsxParseElementAt (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:354:30)
    at Parser.pp.jsxParseElement (/Users/david/Desktop/meetup-project/node_modules/babylon/lib/plugins/jsx/index.js:390:15)

[davidawad]

based on this page.

[davidawad]

Solved it! It required a function call to return a JSON object to that the attribute could be set properly.

However I still maintain that it should work be able to take a JSON object directly from the attribute assignment, or have a more clear explanation in the error message that you can't set an html attribute with a JSON object directly.

    return (
        <ul>
            {local_events.map(function(item) {
                function createMarkup(item) { return {__html: item.description}; }
                return <Child key={(item.time * Math.random())}> <div dangerouslySetInnerHTML={createMarkup(item)}/> <hr/> </li>
            })}
        </ul>
    )

[yangshun]

On a side note, you shouldn't use random keys: #1342 (comment)

[trusktr]

On a side note, you shouldn't use random keys: #1342 (comment)

The random key prevents React from doing any meaningful performance improvement.