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?

Can this be used only with dates? is it possible to use it with strings instead of dates. I am just trying to use this package, getting all issues which you have faced, so wanted to know. — Raphael
– Raphael, Commented May 6, 2023 at 6:46

Community · Accepted Answer · 2017-05-23 12:17:43Z

2

Changes:

1. You are returning 2 elements from render method, you need to wrap them in a div.

Check this answer for more explanation.

2. As per link you attached, values needs an array of dates with 'mm/dd/yyyy' format, but you are passing 'dd/mm/yyyy':

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

Convert this to proper format:

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

Try this:

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>
        }
    }

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 17, 2017 at 12:32

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adil Over a year ago

I'm actually returning it inside a body div in my real code that I forgot adding in the snippet here, edited now. I also converted date format but nothing worked, still getting the same error.

Mayank Shukla Over a year ago

but you removed the values from ques, are you using that in your code ??

Adil Over a year ago

Sorry didn't get, which values are you talking about?

Adil Over a year ago

Yeah the error discussed in the question has been resolved by these changes. But I'm unable to successfully make the timeline as discussed in that github issue.

Adil · Accepted Answer · 2017-05-29 20:31:39Z

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

edited May 29, 2017 at 20:31

answered May 29, 2017 at 20:23

Adil

22.6k7 gold badges31 silver badges56 bronze badges

Collectives™ on Stack Overflow

React Horizontal Timeline distance of undefined error

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related