react destructuring variable got undefined

Question

I am new to react. My problem is that my variables keep saying that it is undefined. What I am trying to do is to display those variable but fail to destructure it. A filter function is executed and return a single tour. The data is successfully retrieved. By destructuring this, some variable contains an array can not be displayed. Does anyone know how to fix this?

TypeError: Cannot read property '0' of undefined

My data looks like this.

[
  { 
    "_id": "12345",
    "name": "I am first tour",
    "startLocation": {
       description: "USA",
       type: "point"
    },
    "startDates": [
      "2021-06-19T09:00:00.000Z",
      "2021-07-20T09:00:00.000Z",
    ],
    "imageUrl": [
      "https://something1.jpg",
      "https://something2.jpg",
      "https://something3.jpg",
    ],
  },
  //.....rest data
]

import React, { Component } from 'react';
import './Tour.css';
import { connect } from 'react-redux';

class Tour extends Component {
constructor(props) {
    super(props)
        this.findSingletour = this.findSingletour.bind(this);
    }

    findSingletour = (tourId) => {
        const notYetFilterTours = this.props.tours.tourState.data;
        let filtered = [];

        if (notYetFilterTours) {
            filtered = notYetFilterTours.find((tour) => {
                if (tour.id === tourId) {
                    return filtered;
                }
                return filtered;
            });
        }
        return filtered;
    };
        
    render() {
    const tourId = this.props.match.params._id;
    let SingleTour = this.findSingletour(tourId);
     
        const {
            name,
            startLocation,
            startDates,
            imageUrl
            } = SingleTour;

        return (
            <div>
                <span>{name}</span> // successfully rendered
                <span>{startLocation[0]}</span> // undefined
                <span>{startDates[0]}</span> // undefined
                <span>{imageUrl[0]}</span> // undefined
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    tours: state.tourContainer,
});

export default connect(
    mapStateToProps,
)(Tour);

Console and check ''SingleTour'' there must be something wrong with that. — tsfahmad
– tsfahmad, Commented Jan 8, 2021 at 9:03

Or Assayag · Accepted Answer · 2021-01-08 09:02:50Z

1

Need to do validation just in case:

class Tour extends Component {
    // some code
    render() {
     
        const {
            name,
            startLocation,
            startDates,
            imageUrl
            } = SingleTour;

        return (
            <div>
                <span>{name}</span> // successfully rendered
                <span>{startLocation && startLocation.length > 0 ? startLocation[0] : ''}</span> // undefined
                <span>{startDates && startDates.length > 0 ? startDates[0] : ''}</span> // undefined
                <span>{imageUrl && imageUrl.length > 0 ? imageUrl[0] : ''}</span> // undefined
            </div>
        )
    }
}

answered Jan 8, 2021 at 9:02

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

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

2 Comments

KK28 Over a year ago

Your answer is the most suitable in this case but I made a mistake. The startLocation variable is an object. How do I check the object with your answer? startLocation['description'] is undefined

Or Assayag Over a year ago

if (startLocation && startLocation['description']) { }

Vivek V Dwivedi · Accepted Answer · 2021-01-08 09:14:03Z

1

You can provide default values, and it is generally a good idea to have sensible defaults in case data is not loaded and UI is rendered.

So something like this would prevent such errors:

const {
    name = '',
    startLocation = [],
    startDates = [],
    imageUrl = ''
} = SingleTour;

Now if your UI renders and tries to get 0 of startLocation, it won't fail. It will of course find nothing, and display nothing except the UI skeleton, but the app will not error out.

answered Jan 8, 2021 at 9:14

Vivek V Dwivedi

2,6352 gold badges31 silver badges41 bronze badges

Collectives™ on Stack Overflow

react destructuring variable got undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related