1

Brand new to React (looked up on wikipedia two days ago) so downloaded current version v0.13.3 from home page. Trying to find a checkbox example (check a box, something happens - like a label appears or something). This one works in JSFIDDLE. Discovering with much frustration that that things are often deprecated on new releases of React, so older examples don't work anymore. On this one, the browser says

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined`)

which is not even in the code. Looked at bunches of articles, tried bunches of things like 

React.renderComponent → React.render

Anyone know the magic tricks required to make this example work with the current version of v0.13.3?

Or anyone know of a working checkbox example in v0.13.3?

Thanks.

  • Do you have a fiddle with the code you have tried for v0.13.3? – Mark Jun 24 '15 at 22:14
  • Sure. [JSFIDDLE](http://jsfiddle.net/airwwwave/jgkcxusb/). Commented lines are things I've tried. [article1](http://stackoverflow.com/questions/21581688/react-facebook-managed-state-of-controlled-checkboxes), [article2](https://facebook.github.io/react/docs/forms.html), [article3](https://facebook.github.io/jest/docs/tutorial-react.html), [article4](http://stackoverflow.com/questions/26615779/react-checkbox-not-sending-onchange), [article5](http://stackoverflow.com/questions/29320363/cannot-read-property-reactautobindmap-of-undefined), [article6](https://github.com/facebook/react/issues/2661) –  Jun 24 '15 at 22:42

1 Answers1

0

The error is in the rendering of the element.

React.renderComponent(
    CrossoutCheckbox({text: "Text Text", complete: false}),document.body
);

The right syntax, if you don't want to use JSX is the following:

React.render(
    React.createElement(
        CrossoutCheckbox, {text: "Test text", complete: false}),
        document.body);

The direct creation of an element was removed in the 0.13.0, as you can read in the change log https://github.com/facebook/react/blob/master/CHANGELOG.md

Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement

Davide Fiorello
  • 61
  • 1
  • 2
  • Thanks! I tried that one (as you can see from the last commented out area in the fiddle where I was trying things), but I had two syntax errors! I needed to replace the opening parens after CrossoutCheckbox with a comma and space. And also needed to delete the closing parens and semicolon. Which your code did. Thank you! –  Jun 24 '15 at 23:14
  • Well!!Try to use JSX instead of the createElement syntax. The code will be more clear. All the modern IDE support it and you can add some gulp/grunt automation to prebuild your code. – Davide Fiorello Jun 24 '15 at 23:33
  • Thanks. Yeah, I had thought the [initial working example](http://jsfiddle.net/d10xyqu1/1/) was using JSX. It is right? But I guess I didn't realize some of the solutions I was reading about and trying were NOT using JSX. That's a lightbulb going off there! Yes, ultimately I would like a JSX solution. So, I'll keep trying. Thanks again. –  Jun 25 '15 at 12:29