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> ) }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter