CODEWITHSUNDEEP
reactjsjsx
adorableDanger
adorableDanger

Reputation: 5

Getting error in react.js , TypeError: Cannot read property 'map' of undefined

I am a beginner React.js learner. I dont know where did I made mistake and this is my first quesiton ever. This is my component List.js which I Sent props from another component calls Contact.js

import React, { Component } from 'react'
import './List.css';
import PropTypes from "prop-types";

 
class List extends Component {
    static propTypes={
        contacts:PropTypes.array.isRequired
    };
    render() {
        return (
            <div className="ListArea"> 
                <input name="filter" id="filter" placeholder={"Filter by name or phone"} /> 
                <ul className={"List"} >
                   {
                       this.props.contacts.map(contact =>   
                                           
                        <li>
                        <span className={"name"}>{contact.name}</span>
                        <span className={"phone"}>{contact.phone}</span>
                        <span className={"clearfix"}></span>
                        </li>
                        
                        
                    }
                   
                    
                </ul>
            
            
            
            
            </div>
        )
    }
}

export default List;


import React, { Component } from 'react'
import List from "./List";
import "./List.css"
import Form from './Form';

class Contacts extends Component {
    render() {
        return (
            <div>
                <List Contacts={this.props.Contacts}/>
                <Form/>


            </div>
        )
    }
}
export default Contacts;

I am so inexperienced here sorry for my mistake

Upvotes: 0

Views: 30

Answers (1)

Apostolos
Apostolos

Reputation: 10463

contacts may be undefined at first load.

Check if it exists and then use map

this.props.contacts && this.props.contacts.map(contact =>

OK, so after the updated comment, you are passing wrong property to List component. This, along with undefined check, should fix the problem

<div> <List contacts={this.props.Contacts}/> <Form/> </div>

Upvotes: 1

Related Questions