pure_function_component_refactor_pt_4.jsx

// src/App/Map/SideWrapper/Legend/Legend.jsx

import React from 'react'
...
import Category from './Category/Category'
import { categoryIcons } from '../../category_data'

const Legend = ({ categories, date, toggleFlags }) => {
  const legendCategories = categories.map((category, i) => ( 
    <Category key={i} category={category} />
  ))

  return (
    <article className="legend">
      <h4>Legend</h4>
      <ul>

        ...

        <li>
          <span>
            <img src={categoryIcons["cycling"]} alt="cyclist"/>
          </span> → That's Us! ( as of {date} )
        </li>
        <li>
          <span>
            <img src={categoryIcons["endOfDay"]} alt="flag" onClick={toggleFlags} />
          </span> → Day-to-Day (click flag to hide/show flag markers)
        </li>
        { legendCategories }
      </ul>
    </article>
  )
}

...

export default Legend