0

Now I'm not using JSX ( several reasons )

I'm able to work fine with React.createElement

e.g.

var ui =
    React.createElement('div', {},
        React.createElement('h1', {}, "Contacts"),
        React.createElement('ul', {},
            React.createElement('li', {},
                React.createElement('h2', {}, "James Nelson"),
                React.createElement('a', { href: 'mailto:james@json.com' }, 'james@json.com')
            ),
            React.createElement('li', {},
                React.createElement('h2', {}, "Joe Citizen"),
                React.createElement('a', { href: 'mailto:joe@example.com' }, 'joe@example.com')
            )
        )
    );

React.render(ui, document.getElementById('react-app'));

However, I started reading and seeing about the createClass but I'm getting this error

react-with-addons.min.js:20302 Uncaught Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

Here is my sample code in which I'm just trying to set a variable "x" to html and then use it in the render: return x

What is wrong with this?

var x = "<div><select id='lang' onChange={this.change} value={this.state.value}>";
x = x + "<option value='select'>Select</option>";
x = x + "<option value='Java'>Java</option>";
x = x + "</select><p></p><p>{this.state.value}</p></div>";



var MySelect = React.createClass({

    change: function(event){
        this.setState({value: event.target.value});
    },
    render: function(){
            return(
                    x
                );
    }
});

React.render(MySelect, document.getElementById('react-main'));

Ultimately my goal is to create a dropdown in which onchange it will use react to show/hide other elements ( textboxes etc... ) Question with Answer Type ....

UPDATE

I do see various React in the project

This code someone wrote and I assume it "works" 

SS.OpportunityDetailsGraph= React.createClass({displayName: "OpportunityDetailsGraph",

componentDidMount: function(){
    advisorDataManager.getOpportunityExceptionChart(this.props.opportunity.guid).done(this.renderChart);
},

renderChart:function(html){
    var content = $(this.getDOMNode()).find("#opportunity-details");
    content.html("").append(html).hide().fadeIn("slow");

},

render: function() {
    return (
    React.createElement("div", {className: "chart"}, 
                 React.createElement("div", {className: "ibox float-e-margins"}, 
                     React.createElement("div", {className: "ibox-content"}, 
                         React.createElement("div", {id: "opportunity-details"}, 
                             React.createElement(SS.Loader, null)
                         )
                     )
                 )
             )
        );
}
});
  • 2
    spot to bug... you are trying to render a string as html. why? like not only is that terrible concatenating strings like that. why not just write that exact html in the component return and use jsx? do you know how react works? – John Ruddell May 04 '16 at 21:29
  • cannot use jsx in the project, no I do not know enough how react works –  May 04 '16 at 21:33
  • I saw this answer http://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down and so I started looking into the createClass , i'm not using jsx , so I need to not having that dependency for now –  May 04 '16 at 21:38
  • 1
    @JosephAckerman that question you referenced is using JSX. The react community uses JSX. I think by not using it you are making things quite a bit more difficult for yourself since you won't find a lot of support from people not using it. Without JSX you will have to do a lot of manual stuff and I would suggest not using react. – pizzarob May 04 '16 at 21:44
  • Either use `React.createElement` or JSX. You can't wrangle HTML like that because React can't parse it. – Andy May 04 '16 at 21:57
  • See it less as a dependency and more as a valuable time-saving tool. – Andy May 04 '16 at 21:58
  • It's fine to use React without JSX, but you can't use strings of HTML or JSX instead of actual JSX. A render method needs to return a `ReactElement` -- you're just returning a string that contains JSX :/ – JMM May 04 '16 at 22:02
  • ok, thanks for the advise –  May 04 '16 at 23:57

0 Answers0