React Horizontal Timeline distance of undefined error

Question

I'm trying to use React Horizontal Timeline in my react app but I'm getting that error (pointing to line # 379 of react-horizontal-timeline.js):

Uncaught TypeError: Cannot read property 'distance' of undefined

My code includes:

import React, { Component } from 'react';
import HorizontalTimeline from 'react-horizontal-timeline';

class Foo extends Component {
    state = {
        value : '01-01-1990',
        previous: 0
    };
    render(){
        const VALUES = ['20-04-1991'];
        return(){
            <div>
                <HorizontalTimeline values={VALUES} 
                    indexClick={(index) => {
                        this.setState({value: index, previous: this.state.value});
                    }} 
                />
                <div> {this.state.value} </div>
            </div>
        }
    }
}
export default Foo;

Can somebody please identify the real issue or alternatively suggest some good option for horizontal timeline for react?

Answer 1

There are two main issues in the snippet posted in the question.

• Wrong Date Format: As per the simple and limited documentation, required format is mm/dd/yyyy. Pointed out by @Mayank

• index declaration: It needs to define index first before using as index={this.state.value}

See similar github issue