Notes for how to link up the search and map components in LISC.

search-map-components.md

1. Reorganize the AwardeeMap component to use local state variables

• Read the short React guide on Components and Props
• Read the short React guide on State and Lifecycle stopping when you get to the Adding Lifecycle Methods to a Class section (the rest isn't relevant for this portion of work)
• In index.js, turn AwardeeMap into a class-based React component
• Initialize a state attribute, an object containing a markers array, in AwardeeMap.constructor() -- we'll use this attribute to track the marker state for both the search box and the map
• In the function assigned to the render prop of the StaticQuery in AwardeeMap, refactor the function calls that generate CircleMarkers for each marker so that the markers can be generated by a single component, AwardeeMarkers:

<AwardeeMarkers markers={this.state.markers} />

(This will probably require creating a couple extra components to render different popups depending on whether the marker is a Driehaus or CNDA marker. Give this a try, and if you get stuck, refer to the React guide on Conditional Rendering for hints.)

2. Lift up the search state from the search component to the AwardeeMap component

• Read the React docs on Lifting State Up
• In search.js, refactor the component similar to the way they refactor the Calculator in the React guide, so that the search updates results using a function called this.props.onSearchChange() on submit (we'll define that function next)
• In index.js, add a method to AwardeeMap called onSearchChange() that accepts a set of search results and updates the AwardeeMap state to set a new list of markers based on the search results
• In index.js, update the search box component to initialize with an onSearchChange prop corresponding to AwardeeMap.onSearchChange()

3. Set the initial marker state to include all markers

3. At the start of the function assigned to the render prop of the StaticQuery in AwardeeMap, initialize a variable allMarkers as the concatenation of the Driehaus and CNDA winner arrays and pass

   it into the AwardeeMarkers component

4. Update the AwardeeMarkers component so that it falls back to the allMarkers prop when the markers prop is empty