Получение ошибки в реакции. js, TypeError: невозможно прочитать свойство 'map' неопределенного значения

Question

Я новичок в React. js ученик. Я не знаю, где я сделал ошибку, и это мой первый вопрос. Это мой список компонентов. js который я отправил реквизиты из другого компонента, вызывающего контакт. 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;

Я так неопытен здесь, извините за мою ошибку

Answer 1

contacts может быть неопределенным при первой загрузке.

Проверьте, существует ли он, а затем используйте map

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

ОК, поэтому после обновленного комментария вы передаете неверный свойство к компоненту List. Это вместе с проверкой undefined должно решить проблему

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