Can't render string without parent.

[reggi]

I'm trying to make a component void of html. You can see an example of this here. I'm using the displayName property which JSX sets. However I get an error with code like this:

var LiquidAssign = module.LiquidAssign = React.createClass({
  displayName: "LiquidAssign",
  render: function() {
    return (
      {"{% assign "+this.props.name+" = "+this.props.value+"%}"}
    )
  }
});

And not with this:

var LiquidAssign = module.LiquidAssign = React.createClass({
  displayName: "LiquidAssign",
  render: function() {
    return (
     <div>
      {"{% assign "+this.props.name+" = "+this.props.value+"%}"}
     </div>
    )
  }
});

I'm getting

Parse Error: Line 18: Unexpected token +

[andreypopp]

{"{% assign "+this.props.name+" = "+this.props.value+"%}"} is not a valid JSX

[reggi]

@andreypopp How would you output that string?

[reggi]

Just to confirm @andreypopp

This works

var output = React.createClass({
  displayName: "output",
  render: function() {
    return (
      <div className="output">
      {"Test"}
      </div>
    )
  }
});

This doesn't

var output = React.createClass({
  displayName: "output",
  render: function() {
    return (
      {"Test"}
    )
  }
});

So your not allowed to print anything to the DOM without it being encapsulated by HTML?

[reggi]

I tried this and got a new error, that makes a lot more sense.

var output = React.createClass({
  displayName: "output",
  render: function() {
    return "{{"+this.props.var+"}}"
  }
});

Error: Invariant Violation: output.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

[andreypopp]

Yes, returning a string from a function is valid syntax but it's not valid in React, cause now React component should render into some other React components (composite or DOM ones).