import React from "react";
import ReactDom from "react-dom";
import Header from "./Header"
import Footer from "./Footer"
import Note from "./Note"
import NoteList from "../noteArray"

function createNote(note){
    return (<Note
    id = {note.id}
    key = {note.id} // it is mandatory to use it
    title = {note.title}
    detail = {note.detail}
    img = {note.img}
     />);
}

function App(){
    return (
    <div> 
    <Header />
    <Note
    title = "The first note"
    detail = "note Detail"
    img = {NoteList[0].img}
     />
     {NoteList.map(createNote)}
   

    <Footer />
    </div>
    )
}