Mapping array returns undefined values

Question

I am mapping an array called tours

   export const tourData = [
  {
    id: 1,
    city: "new york",
    img: "./img/newyork.jpeg",
    name: "new york bridge tour",
    info:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel,repellendus!"
  },

as shown below

 state={
    tours: tourData
} 
 render(){
    const {tours} = this.state;

    return(
        <section className="tourlist">
          {tours.map(tour => {
              return (
                  <Tour key={tour.id} tour={tour} removeTour={this.removeTour}/>
              )
          })}
        </section>
    )
}

and i pass the tour as a prop into the Tour component.

const {id , city , img, name, info} = this.props.tour;
    const {removeTour} = this.props;

The webapp works well but when i make a test for the Tour component and i pass in values as props

 const props ={
            id : 1,
            city: 'Test City ',
            img: 'Test img',
            name: 'Test name',
            info: 'Test Info'
        }

i get errors like

Cannot read property 'id' of undefined

but the webapp works fine. need some help on this and thanks in advance

Did your tours variable get called before you initialize it? — P4uB0rd4
– P4uB0rd4, Commented Sep 18, 2019 at 11:53

Chris · Accepted Answer · 2019-09-18 12:38:18Z

5

while passing values to the props of Tour component in your tests you should be doing something like this

const props = {
  tour: {
    id : 1,
    city: 'Test City',
    img: 'Test img',
    name: 'Test name',
    info: 'Test Info'
  }
};

since inside your Tour component it is reading from this.props.tour.

edited Sep 18, 2019 at 12:38

Chris

59.7k20 gold badges121 silver badges144 bronze badges

answered Sep 18, 2019 at 12:00

Uddalak Das

1216 bronze badges

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

1 Comment

Uddalak Das Over a year ago

Glad to help..!!

Collectives™ on Stack Overflow

Mapping array returns undefined values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related