CODEWITHSUNDEEP
javascriptreactjs
dns_nx
dns_nx

Reputation: 3933

Error: Uncaught TypeError: Cannot read property 'map' of undefined

I'm just starting with reactjs and doing a tutorial. This tutorial seems to be not completely up-to-date. I'm always getting this error message:

Uncaught TypeError: Cannot read property 'map' of undefined
    at ContactsList.render (ContactsList.js:40)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
    at Object.receiveComponent (ReactReconciler.js:125)

This is my code:

import React, { Component } from 'react';
import Contact from './Contact';

class ContactsList extends Component {

    constructor() {
        super();
        this.state = {
            search: ''
        };
    }

    updateSearch(event) {
        this.setState({ search: event.target.value.substr(0,20) })
    }

    render() {
        return (

            <div>
              <ul>
                { 
                    this.props.contacts.map((contact)=> {
                        return <Contact contact={contact} key={contact.id} />
                    })

                }
              </ul>
              <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
            </div>
        );
    }
}

export default ContactsList

This ContactList class is called this way:

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom'
import ContactsList from './ContactsList';

let contacts = [{
  id: 3,
  name: 'Ray',
  phone: '123 555 5555'
},
{
  id: 2,
  name: 'Jay',
  phone: '123 123 5555'
},
{
  id: 1,
  name: 'May',
  phone: '123 123 1234'
}]

class App extends Component {
  render() {
    console.log('contacts:' + this.props.contacts);
    return (
      <div>
        <h1>Contacts List</h1>
        <ContactsList contacts={this.props.contacts} />
      </div>
    );
  }
}

export default App;

ReactDOM.render(<App contacts={contacts} />,document.getElementById('root'));

I actually don't know, why this error come up. I've already googled a lot, but nothing brought the solution. Maybe someone can give me a hint, what the error reason is and how to solve it? Thanks in advance.

Upvotes: 0

Views: 811

Answers (1)

dpwr
dpwr

Reputation: 2812

The reason is that you are passing in this.props.contacts from your App component. contacts is not a property of your App or even state, it is a standard javascript variable in the scope.

This should work.

<ContactsList contacts={ contacts } />

Obviously if you make it state in App in the future then you would adjust accordingly.

Upvotes: 1

Related Questions