Temporary contacts array - KatyaHorton/Udacity-React-practice GitHub Wiki

1. Open App.js file.

2. Create a new component ListContacts.js (it will receive the contacts, and then display the contacts to the view. State living is inside our App.js file, and component will be displaying it to the view (mapping over each of these contacts, displaying a specific contact to the view)):

import React, { Component } from 'React'

class ListContacts extend Component {
   render() {
    return (
     <ol className='contact-list'>
              
     </ol>
}}

export default ListContacts

3. Import our ListContacts component to the App.js import ListContacts from './ListContacts'

4. In order to use LisContacts component we have to add it to the App component (App.js)

class App extend Components {
 render() {
  return(
   <div>
    <ListContacts  />
   </div>
)}}

After that ordered list will appear in the DOM, but nothing will be displayed, as the list is empty, and no CSS is applied to it.

5. In order to pass contacts array to the ListContacts component we need to:

• in App.js we add an attribute to our ListContacts component and pass it our contacts array as a value:

<ListContacts contacts={contacts} /> 

• to access the contacts array from ListContacts (in *ListContacts.js) we can use:

class ListContacts extend Component {
    render() {
     return (
      console.log(Props, this.props)
      <ol className='contact-list'>    
      </ol>
}}

6. In ListContacts this.props is an object which has a contacts property.

We want to map over out contacts property on this.props, and for each item in contacts array we want to show that specific information to the view.

      <ol className='contact-list'>
        {this.props.contacts.map((contact) => (
        <li>
          {contact.name}
        </li>
       ))}
      </ol>

For each item in ```contacts`` we created a list item for our ordered list.

We pass map() method a function, which is going to be invoked individually with each item in an array.

We are mapping over our contacts and for each item into our contacts array we are creating a list item and showing the contacts' name.

7. Note, that each child in the array MUST have a unique key prop.

We can do it with array's items names/index/id (basically, the attribute we use must be unique). That is required so React will keep track of the changes in list's items.

8. We add avatar, email and delete icon (CSS was already provided by Udacity, so we just need to add classNames to the elements accordingly).

      <ol className='contact-list'>
        {this.props.contacts.map((contact) => (
         <li key={contact.id} className='contact-list-item'>
          <div className='contact-avatar' style={{
            backgroundImage: `url(${contact.avatarURL})`
          }}/>
          <div className='contact-details'>
            <p>{contact.name}</p>
            <p>{contact.email}</p>
          </div>
          <button className='contact=remove'>
             Remove
           </button> 
         </li>
       ))}
      </ol>

• passed our contacts array into ListContacts
• created and ordered list inside of the ListContacts component
• mapped over each contact inside contacts array
• created a list item with UI we needed