Not working using import

[ajAnshul]

Hi,

I have tried this scheduler using import. but not rendered properly and give this error:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

My Source code is :

import React from 'react';
import moment from 'moment';
import Scheduler from 'legit-scheduler'
import {RangeDate, DateRange  } from 'legit-scheduler';
import { Row, Col } from '../../components/UI/Layout';
import { Panel } from '../../components/UI/';


var resources = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'],
    today = new RangeDate(new Date()),
    events = [
      {
        id: 'foobar',
        title: 'Do this',
        startDate: today.advance('days', 1).toRef(),
        duration: 5,
        resource: 'One'
      },
      {
        id: 'barfoo',
        title: 'Do that',
        startDate: today.advance('days', 3).toRef(),
        duration: 4,
        resource: 'Two'
      },
      {
        id: 'barfoobaz',
        title: 'I am disabled',
        startDate: today.advance('days', 2).toRef(),
        duration: 7,
        resource: 'Three',
        disabled: true
      },
      {
        id: 'foobah',
        title: 'Do another thing',
        startDate: today.advance('days', 6).toRef(),
        duration: 14,
        resource: 'Seven'
      },
    ]
class Scheduling extends React.Component{

  constructor(props){
    super(props);
    let from = new RangeDate()
    let to = from.advance('weeks', 2)

    this.state = {
      events : events,
      range: new DateRange(from, to)
    }
  }

  eventChanged(props) {
    const index = this.state.events.findIndex(event => event.id === props.id)
    const newEvents = this.state.events
    newEvents[index] = props
    this.setState({ ...props, events: newEvents })
    console.log(props)
  }

  eventResized(props) {
    const index = this.state.events.findIndex(event => event.id === props.id)
    const newEvents = this.state.events
    newEvents[index] = props
    this.setState({ ...props, events: newEvents })
    console.log(props)
  }

  eventClicked(props) {
    alert(`${props.title} clicked!`)
    console.log(props)
  }

  cellClicked(resource, date) {
    alert(`You clicked on ${resource} - ${date}`)
    console.log(resource, date)
  }

  rangeChanged(range) {
    this.setState({ range: range })
  }

  render() {
    const { events, range } = this.state,
            { from, to } = range
    return (
      <div>
				<Panel>
        <Scheduler
       from={from}
       to={to}
       resources={resources}
       events={events}
       width={1100}
       onEventChanged={this.eventChanged}
       onEventResized={this.eventResized}
       onEventClicked={this.eventClicked}
       onCellClicked={this.cellClicked}
       onRangeChanged={this.rangeChanged}
     />
        </Panel>
      </div>
    );
  }
}

export default Scheduling;

Can someone help me on this
@dphaener

[dphaener]

@ajAnshul I'll take a look at this tonight. Looks to be a bug to me from your initial report.