11 Passing Date Into Our Components

vi ContactsList.js

import React from 'react';
class ContactsList extends React.Component{

    render(){
         console.log(this.props.contacts);

        return(
            <ul>
            <li> {this.props.contacts.name} :{this.props.contacts.phone}</li>
            </ul>
            )
    }
}
export default ContactsList;

vi App.js

import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';
const contacts ={
        name: 'scott',
        phone:'555 666 5555'
    };
class App extends React.Component {


render(){
     console.log(this.props.contacts);
    return(
        <div>
        <h1> Contacts List</h1>
        <ContactsList  contacts={this.props.contacts}/>
        </div>

        )
}


}

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