Reactjs and simple HTML rendering

Question

First of all, I am completely new to respond, so I’m not sure if my code is already written to “respond”.

So far I have created a couple of response classes that create Bootstrap Modal. To set the initial state, I call the Ajax function in the function componentsDidMount. This works fine until I try to embed plain HTML in a modal body.

The server request works fine, and I get the simple HTML in mine this.state.data.content, but if I try to insert it into the modal body, I get the following error:

Error: Invariant violation: objects are not valid as a child element of React (found: object with keys {__html}). If you want to display a collection of children, use an array or wrap the object using createFragment (object) from React add-ins.

Does anyone know how to fix this? Can I do the right thing here?

Thanks!

<script type="text/babel">

    var Modal = ReactBootstrap.Modal;
    var Button = ReactBootstrap.Button;
    var ButtonToolbar = ReactBootstrap.ButtonToolbar;


    var L5fmHeaderButton = React.createClass({

        render: function() {
            var iconClass = "glyphicon " + this.props.buttonIcon;
            return(
                <button onClick={this.props.onClick} className="lfm-Modal-Button">
                    <span className={iconClass} aria-hidden="true"></span>&nbsp;
                    {this.props.buttonText}
                </button>
            );
        }
    });

    var L5fmModalBody = React.createClass({

        rawMarkup: function() {
            return { __html: this.props.content };
        },

        render: function() {

            return(
                <Modal.Body>
                    dangerouslySetInnerHTML={this.rawMarkup()}
                </Modal.Body>
            );
        }

    });

    var L5fmModal = React.createClass({

        getInitialState : function() {
            return {
                data : []
            };
        },

        componentDidMount: function() {
            $.ajax({
                url: 'L5fm/setInitialState',
                dataType: 'json',
                cache: false,
                success: function(data) {
                    this.setState({data: data});
                    console.log(data);
                    console.log(this.state.data);
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        },

        changeDirectory : function() {
            if (this.state.privateDir) {
                this.setState({privateDir: false});
            }
            else {
                this.setState({privateDir: true});
            }
        },

        render: function() {

            if(this.state.data.privateDir) {
                var browseIcon = "glyphicon-folder-open";
                var browseText = "browse all files";
            }
            else {
                var browseIcon = "glyphicon-briefcase";
                var browseText = "browse private files";
            }

            return(

                <Modal {...this.props} bsSize="large" aria-labelledby="contained-modal-title-lg">
                    <Modal.Header closeButton>
                        <div className="header-button-group">
                            <L5fmHeaderButton buttonIcon="glyphicon-cloud-upload" buttonText="upload" />
                            <L5fmHeaderButton buttonIcon="glyphicon-list" buttonText="list View" />
                            <L5fmHeaderButton onClick={this.changeDirectory} buttonIcon={browseIcon} buttonText={browseText} />
                        </div>
                </Modal.Header>
                    <L5fmModalBody content={this.state.data.content}/>
                </Modal>
            );
        }

    });


    var App = React.createClass({
        getInitialState: function() {
            return { lgShow: false };
        },
        render: function() {
            let lgClose = () => this.setState({ lgShow: false });

            return (
                    <ButtonToolbar>
                       <Button bsStyle="primary" onClick={()=>this.setState({ lgShow: true })}>
                           Launch large demo modal
                       </Button>

                       <L5fmModal show={this.state.lgShow} onHide={lgClose} />
                    </ButtonToolbar>
            );
        }
    });

    ReactDOM.render(<App />, document.getElementById("modal"));

</script>

Answer 1

Well, do you think you are missing a div-tag where you want to display your raw html

given a Modal.Body code change like this

var L5fmModalBody = React.createClass({
    rawMarkup: function() {
        return { __html: this.props.content };
    },
    render: function() {
        return(
            <Modal.Body>
                <div dangerouslySetInnerHTML={createMarkup()} />
            </Modal.Body>
        );
    }
});

otherwise, the rendering will be broken because your markup really cannot be set as a child of Modal.Body