Unable to implement ZingChart-React

Question

I'm stuck with this codes,

index.html

<!doctype html>
<html lang="en">
<head>
<title>React Redux Starter Kit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
 <div id="root" style="height: 100%"></div>
 <div id="demo"></div>
 </body>
 </html>

Counter.js

import React from 'react'
import {core as Core} from 'zingchart-react'

export const Counter = React.createClass({
render () {
var myConfig = {
       type: "bar",
       series : [
               {
                values : [35,42,67,89,25,34,67,85,90.99]
                }
                 ]
};
return(
<div>Hello
<Core id="myChart" height="300" width="600" data={myConfig} />
</div>
   )
  }
  })
 export default Counter

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from './store/createStore'
import AppContainer from './containers/AppContainer'
import Counter from './components/Counter/Counter'


ReactDOM.render(<Counter/>, document.querySelector('#demo'));

 // ========================================================
// Browser History Setup
// ========================================================
const browserHistory = useRouterHistory(createBrowserHistory)({
 basename: __BASENAME__
 })

// ========================================================
// Store and History Instantiation
// ========================================================  

const initialState = window.___INITIAL_STATE__
const store = createStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
 })

if (__DEBUG__) {
  if (window.devToolsExtension) {
    window.devToolsExtension.open()
  }
}
const MOUNT_NODE = document.getElementById('root')

 let render = (routerKey = null) => {
 const routes = require('./routes/index').default(store)

  ReactDOM.render(
    <AppContainer
      store={store}
       history={history}
       routes={routes}
       routerKey={routerKey}
      />,
   MOUNT_NODE
   )
     }

 if (__DEV__ && module.hot) {
 const renderApp = render
  const renderError = (error) => {
   const RedBox = require('redbox-react')

   ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
   }
 render = () => {
  try {
    renderApp(Math.random())
   } catch (error) {
   renderError(error)
  }
   }
   module.hot.accept(['./routes/index'], () => render())
  }
   render()

I am using react-redux starter kit - https://github.com/davezuko/react-redux-starter-kit, I'm getting this error, please help me out.

ERROR: Cannot read property '__reactAutoBindMap' of undefined

are you rendering your component via ReactDOM.render()? – JFAP Sep 05 '16 at 11:02 — JFAP, Sep 05 '16 at 11:02
I'm strictly using es6 . – piyush singh Sep 05 '16 at 11:33 — piyush singh, Sep 05 '16 at 11:33

score 1 · Answer 1 · answered Sep 05 '16 at 11:05

1

core is not a valid name for a React Component. React Components must start with an upper case letter, that is how React distinguish between components and HTML tags.

So your code should look like this

import React from 'react'
import {core as Core} from 'zingchart-react'

export const Counter = React.createClass({
       render () {
         var myConfig = {
           type: "bar",
           series : [
                      {
                        values : [35,42,67,89,25,34,67,85]
                      }
           ]
         };
         return (
          <div>Hello
            <Core id="myChart" height="300" width="600" data={myConfig} />
          </div>
         )
      }
})
export default Counter

working example

answered Sep 05 '16 at 11:05

QoP

27,388
16
74
74

It's not working, I've tried this earlier. ReactClass.js:842 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined – piyush singh Sep 05 '16 at 11:31
As you can see in the **working example**, that's the right way to do it. That error message you are getting is probably related to `ReactDOM.render()`, but that's probably another question. – QoP Sep 05 '16 at 11:34
I'm strictly using es6 and ReactDOM.render() deprecated. – piyush singh Sep 05 '16 at 11:42
Are you sure you are using `ReactDOM.render()`? Because it's not deprecated. https://facebook.github.io/react/docs/top-level-api.html#reactdom – QoP Sep 05 '16 at 11:47
I have never used this Can you please provide me code using React.DOM.render() ? – piyush singh Sep 05 '16 at 12:00
the working example I linked in my answer is using `ReactDOM.render()` – QoP Sep 05 '16 at 12:04
see my answer, @QoP – JFAP Sep 05 '16 at 12:28

score 1 · Accepted Answer · answered Sep 05 '16 at 12:27

This is the es6 way of writing your component:

import React from 'react';
import {core as Core} from 'zingchart-react';

class Counter extends React.Component {
       render () {
         var myConfig = {
           type: "bar",
           series : [
                      {
                        values : [35,42,67,89,25,34,67,85]
                      }
           ]
         };

         return (
          <div>Hello
            <Core id="myChart" height="300" width="600" data={myConfig} />
          </div>
         )
      }
}

export default Counter;

and to render it,

ReactDOM.render(<Counter />, document.getElementById('some_div'));

I'm getting error registerComponent(...): Target container is not a DOM element. — piyush singh, Sep 05 '16 at 12:40

Unable to implement ZingChart-React

2 Answers2