Intentions

1. Understand Rendering Collections in React using .jsx JavaScriptXml files. For browser-side application logic for the frontend.

Happenings

• Using 3 elements in an array to iterate through the elements and render them to the page.
• Using map and reduce function.
• As the files are in xml format we need {} to evaluate JavaScript expressions.
• When rendering children of an array, an iterator should have a unique key to identify them to prevent problems when adding or removing items.
• Not using Anti-pattern: Array indexes as key ID’s when iterating though arrays.
• Using props and destructuring to extract values and objects from arrays upon assignment.
• Create a component that when initialized creates an instance of the component that React can render out. This item renders out one instance at a time of the object per iteration through the App call.
• In notes.map(note ⇒ function, <Note is called and passed key={note.id} which gives each instance an id value of the iteration through the array.
• The key prop is a special attribute in React that helps the library identify which items have changed, are added or are removed.
• note prop note={note} passes the note object as a prop to the Note component to access the data contained withing the note object and use it to render its UI. This passes one complete object iteration from the array to Note to handle as needed.
• Remove the components Note and restructure it into its own folder and file to import the component.
• In the new Study.jsx file paste in the Note component and export default Note at the end of the file.
• In the App.jsx import Note from “./components/Study” will import the .jsx file to use the components in the App.jsx.
• When in doubt console.log everything

const Note = ({ note }) => {
  return (
    <li>{note.content}</li>
  )
}

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {notes.map(note => 
          <Note key={note.id} note={note} />
        )}
      </ul>
    </div>
  )
}

export default App

Exercises

1. Main.jsx from the npm install is fine just remove any unused imports to clear the errors.