We built a Sticky Notes UI with React at Skillcrush. I want to break the app down here to understand it.
Component files:
App.js
Extends component
Includes state: notes array and search text string
Includes methods: addNote = (), onType = (editMeId, updatedKey, updatedValue), onSearch = (text), removeNote = (noteId)
Includes componentDidUpdate and componentDidMount
render returns Header with onSearch, addNote, searchText
render returns NotesList with removeNote, onType, and notes
Header.js
Accepts props from App.js
Includes the function const callSearch = (e); which uses props to pass the e.target.value to the onSearch method that is in App.js
returns <header> with button onClick={props.addNote} and input with value={props.searchText} and onChange={callSearch}
The Header creates new notes (via props to App.js) and displays the searchText in the viewer (via props to App.js) and sends the searched-for text to the onSearch method in App.js
Note.js
Accepts props from NotesList.js
The const Note function includes three functions (const updateTitle, const updateDescription, const clickDelete) and then returns a note as a list item with an input field for the title and a textarea field for the description, and a span field with an X for deleting the notes.
The input field has value={props.note.title} from the notes array in App.js and it calls the onChange function updateTitle inside Note.js
The textarea field has value={props.note.description} from the notes array in App.js and it calls the onChange function updateDescription inside Note.js
The span with the X calls the onClick function clickDelete inside Note.js
updateTitle captures the text entered into the input field with e.target.value and gets the editMeId from Apps.js with props.note.id; it then passes editMeId, “title”, and updatedValue to the onType = (editMeId, updatedKey, updatedValue) method in Apps.js via props.
updateDescription functions in the same way, but it updates the description field, not the title field
const clickDelete = () uses props.removeNote(props.note.id) to get the note id of the selected note from Notes in App.js and then send that note id to removeNote in App.js
NotesList.js
Has one function: const NotesList = (props)
that includes four functions and then returns a ul list of {noteElements}, which is the last of the four functions.
1 & 2. const searchMatch = props.notes.filter(keepSearchMatches) and keepSearchMatches = (note) => note.doesMatchSearch
could be combined to searchMatch = props.notes.filter( note => note.doesMatchSearch)
SearchMatch is getting all the notes from notes in App.js via props and filtering out everything except the notes that have doesMatchSearch values of true.
Where are the doesMatchSearch values? They are also in each note in the notes array in App.js
And what sets the doesMatchSearch values? That is the onSearch method that is also inside App.js, but not inside the notes array.
3. renderNote = (note) has an implicit return of a single <Note/> element.
This element has four attributes
a. removeNote from the removeNote = (noteId) method in App.js via props.
This method checks each note in notes via its noteId and returns a new array of notes that only includes the notes whose note.ids don’t match noteId.
Where did noteId come from? From props.removeNote(props.note.id) in clickDelete in Note.js — from Note.js sending the note.id of the note that the user is clicking the delete X on.
b. onType from the onType = (editMeId, updatedKey, updatedValue) method in App.js via props
This method updates the title and description fields when notes are written in.
c. note={note} What does this do? It creates a note attribute that is identical to all the information in a given note in the notes array.
d. key={note.id} This creates a key attribute in note using the note’s id. Why does it need to do this? Isn’t that included in the note={note} part?
4. const noteElements = searchMatch.map(renderNotes) This function maps over all the notes that are included in a search and renders those notes.
So the Note page is for displaying those notes that match the search criteria
index.js
Looks like this:
Recent Comments