Change horizontal error timeline undefined

Question

I try to use React Horizontal Timeline in my response application, but I get this error (pointing to line # 379 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 someone please identify the real problem or, alternatively, suggest a good option for a horizontal timeline for response?

Answer 1

Changes

1. You return 2 elements from the method render, you need to wrap them in div.

See more details.

2. , , array 'mm/dd/yyyy' , 'dd/mm/yyyy':

const VALUES = ['20-04-1991'];

:

const VALUES = ['04/20/1991'];

:

render(){
        const VALUES = ['04/20/1991'];
        return(){
           <div>
               <HorizontalTimeline 
                  values={VALUES} 
                  indexClick={(index) => {
                      this.setState({value: index, previous: this.state.value});
                  }} 
               />
               <div className='text-center'>
                  {this.state.value}
               </div>
            </div>
        }
    }

Answer 2

, , .

• : , mm/dd/yyyy. @Mayank

• index : index={this.state.value}

. github