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

Question

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

you are passing the property this.props.Contacts uppercase and reading it lower case this.props.contacts — Rostyslav
– Rostyslav, Commented Jul 10, 2020 at 9:30
The problem is not in the code that you have provided. It is in the code where you are using the List and passing <List Contacts={this.props.Contacts} /> — Rostyslav
– Rostyslav, Commented Jul 10, 2020 at 9:31
Lets just stop guessing... Please, @Elif can you edit the question and provide the code where List is used instead of the code you have provided? — Rostyslav
– Rostyslav, Commented Jul 10, 2020 at 9:43

Apostolos · Accepted Answer · 2020-07-10 09:39:48Z

1

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>

edited Jul 10, 2020 at 9:39

answered Jul 10, 2020 at 9:26

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related