###### tags: `Lambda` `WEB39` `React`
# Lambda: WEB39: Project Part 1

### White board:
Basic outline of what we will want the app to show

### Base Repo:
https://github.com/SHL-Melissa/web39-react

## Code Snippets:
#### App.js
After we import the relevent js files how we would utilize them

    <div className='links'>
        <School />
        <Notes />
    </div>

#### link.js
This is our basic reusable component. Built in such a way that no matter where we are pulling the data from it can still be used

const Link = (props) => {
    return (
        <div className='data'>
            {props.items.map(item => (
                <div className='info'>
                    <h4>{item.name}</h4>
                    <a href={item.url} target='_blank' rel='noreferrer'>Link</a>
                </div>
            ))}
        </div>
    )
} 

#### Example Data file
We created 2 data files for each of the 2 categories of links that we wanted to add to our page. This is the basic layout of 1 of those files

export default [
    {
        name: "Canvas Link",
        url: "https://lambdaschool.instructure.com/"},
    {
        name: "Training Kit",
        url: "https://learn.lambdaschool.com"
    }
]

#### schoolLink.js
This file is where we pulled in the data and the reusable component link.js together to begin to render the links on the page

import data from './school'
import Link from './link'

const SchoolLinks = (props) => {
    const [links] = useState(data)

    return (
        <>
        <h2>Important School Links</h2>
        <Link items={links} />
        </>
    )
}

## Notes
##### When to map
It is important to know how to pull the data. In this case we know that our data file is an array of objects

array = []
object = {}

Knowing this is important to know how you will be able to call the data. When you have an array of objects you will need to map through the array.
##### Props
Importing a file allows you to use it's contents on the current page, however that content only flows 1 way. Unless you use props.

Props allows you to basically pass information back and forth between files. In the case of this project we are passing the data file information down to the link.js file and then the layout back up.

[Day 1 part 2 notes](https://hackmd.io/Q6NUYghlQ9-mxvXRKjuCgA?view)