CODEWITHSUNDEEP
javascriptreactjs
eriklharper
eriklharper

Reputation: 2978

Dynamically Rendering a React component

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?

Upvotes: 83

Views: 94509

Answers (5)

Juanma Menendez
Juanma Menendez

Reputation: 20109

The solution for me was to assign the imported Component to a variable(with CapitalCase) and then render that variable.

Example:

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';

class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };

        //this is the most important step
       const TagName = this.components.foo;

    render() {
       return <TagName />
    }
}
export default MyComponent;

Upvotes: 3

Jan Klimo
Jan Klimo

Reputation: 4930

As nilgun previously pointed out, the component slug should not be wrapped in curly braces.

If you decide to store it in a variable, make sure it starts with a capital letter.

Here is an example:

var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h3>This is an input</h3>
        <CustomComponent inputType="input" />
        <h3>This is a text area</h3>
        <CustomComponent inputType="textarea" />
      </div>
    );
  }
});

var CustomComponent = React.createClass({
  render: function() {
    // make sure this var starts with a capital letter
    var InputType = this.props.inputType;
    return <InputType />;
  }
});

React.render(<Home />, document.getElementById('container'));

Here's a working fiddle: https://jsfiddle.net/janklimo/yc3qcd0u/

Upvotes: 24

Gudlaugur Egilsson
Gudlaugur Egilsson

Reputation: 2460

If your intention is to inject the actual component rendered, you can do something like this, which is very convenient for testing, or whatever reason you would want to dynamically inject components to render.

var MyComponentF=function(ChildComponent){
    var MyComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="MyComponent">
                    <ChildComponent></ChildComponent>
                </div>
            );
        }
    });
    return MyComponent;
};

var OtherComponentF=function(){
    var OtherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="OtherComponent">
                    OtherComponent
                </div>
            );
        }
    });
    return OtherComponent;
};

var AnotherComponentF=function(){
    var AnotherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="AnotherComponent">
                    AnotherComponent
                </div>
            );
        }
    });
    return AnotherComponent;
};

$(document).ready(function () {
    var appComponent = MyComponentF(OtherComponentF());

    // OR
    var appComponent = MyComponentF(AnotherComponentF());

    // Results will differ depending on injected component.

    ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container"));
});

Upvotes: 5

nilgun
nilgun

Reputation: 10629

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

Upvotes: 100

fankt
fankt

Reputation: 1047

Edit: Maybe you forgot to add /** @jsx React.DOM */ at the beginning of js?

You can use React.DOM though:

render: function() {
  return React.DOM[this.props.component.slug](null, this.props.component.value);
}

http://jsbin.com/rerehutena/2/edit?html,js,output

I am not a React expert, but I think every component should be construct with a specific tag at the beginning. So it could present a clear purpose itself.

Upvotes: 4

Related Questions