Vis.js/React/JavaScript: Render Vis.timeline

Question

I am in the middle of trying to solve a problem with vis.js timeline I hope to get some guidance from you folks. console.log is showing data but the browser shows a blank screen. Unfortunately I am all out of ideas on what else to try it to make it work.

I have the following code. I have tried different ways to make it work but so far no luck. Any help will be greatly appreciated.

     // Config for the Timeline as JSON
const options = {
    width: '100%',
    height: '60px',
    stack: false,
    showMajorLabels: true,
    showCurrentTime: true,
    zoomMin: 1000000,
    type: 'background',
    format: {
      minorLabels: {
        minute: 'h:mma',
        hour: 'ha'
      }
    }
  }

class ScaleTime extends Component{
    constructor({data=[]}) {
        super({data})        
        this.state = {data, id:''}
        //console.log('ScaleTime Data:', data)
      }

      render(){
        const { data } = this.state
        const newAction = data.action.map((actionItem, index) => ({
          ...actionItem,
          id: index + 1
        }));
        const items = {
          ...data,
          action: newAction
        };
        const timeLineData = new vis.DataSet([{items}])
        console.log('timeLineData:', timeLineData)

        var container = document.getElementById('timeline');
          return(              

            <div className="timeline">
                <Timeline 
                    items={items.action}
                    options={options}
                    container={container}
                  />;
            </div>
          )
      }

}//component

Update:

After adding id now I need to change the 'timestamp' property to start. The error message I am now getting is: Property "start" missing in item 1 .

Answer 1

you need to make sure that items has content before calling Timeline. You can do:

 if (!items) return <SpinLoader />; return <Timeline items={items.action} options={options} container={container} />;