Question

139

Dynamically Rendering a React component

rated 0 times [ 146] [ 7] / answers: 1 / hits: 89428 / 10 Years ago, wed, october 22, 2014, 12:00:00

In React JSX it does not appear to be possible to do something like this:

render: function() {

  return (

    <{this.props.component.slug} className='text'>

      {this.props.component.value}

    </{this.props.component.slug}>

  );

}

I get a parse error: Unexpected token {. Is this not something React
can handle?

I'm designing this component so that under the hood, the values stored in this.props.component.slug will contain valid HTML elements (h1, p, etc.). Is there any way to make this work?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayla

Add To Favorites

Follow

Total Points: 681

Total Questions: 102

Total Answers: 108

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

tayla questions

1 Problem embedding tiktok video into angular 7

Fri, Mar 5, 21, 00:00, 3 Years ago

1 Lodash - How to merge two arrays of objects based on key?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Horizontal scroll bar is appearing after using slick slider in the webpage

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Jest: `querySelector` returns null in test of a ReactJS component

Sat, Jul 4, 20, 00:00, 4 Years ago

1 setTimeout with Promises

Thu, Apr 9, 20, 00:00, 4 Years ago

View All

answered 10 Years ago ryder · Accepted Answer

You should not put component slug in curly braces:

var Hello = React.createClass({

    render: function() {

        return <this.props.component.slug className='text'>

            {this.props.component.value}

        </this.props.component.slug>;

    }

});



React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body);

Here is a working fiddle: http://jsfiddle.net/kb3gN/6668/

Also, you can find JSX Compiler helpful for debugging these kind of errors:
http://facebook.github.io/react/jsx-compiler.html