SearchBar_Workshop_Coding.md

Coding from workshop branch to master

src/index.js

• Inside the handleChange filter the results by taking in listItems & looking for e.target.value.toLowerCase()
• Then set setSearchResults(filterResults)

const handleChange = e => {
  let filterResults = listItems.filter(dataRecord => dataRecord.title.toLowerCase().includes(e.target.value.toLowerCase()));
  console.log('filterResults');
  console.log(filterResults);
  setSearchResults(filterResults);
};

src/components/SearchBar.js

• Filling in the <input /> element to build the search bar
• onChange={props.handleChange}
• className='SearchBar'

<input
  className='SearchBar'
  type='text'
  id='header-search'
  placeholder='Search Manga Titles'
  name='Search Bar for Manga Titles'
  onChange={props.handleChange}
/>

src/components/ResultList.js

• Finishing the ResultList component to output the list of records by using map function on searchResults
• {props.searchResults.map(function (resultRecord) {})}
• Inside we would return JSX: return <li key={resultRecord.uniqueKey}><b className='TitleBold'>{resultRecord.title}</b> written by {resultRecord.author}</li>

<ul>
  {props.searchResults.map(function (resultRecord) {
    return <li key={resultRecord.uniqueKey}><b className='TitleBold'>{resultRecord.title}</b> written by {resultRecord.author}</li>
  })}
</ul>