<commit_before>import React from 'react';
import { toHtml } from '../poiTypes';
import { Marker, Popup } from 'react-leaflet';

export default class SearchResults extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      highlightedSearchSuggestion: this.props.highlightedSearchSuggestion,
      searchResults: this.props.searchResults, 
    };
  }

componentWillReceiveProps(newProps) {
  this.setState(newProps);
}

  render() {
    const {searchResults, highlightedSearchSuggestion} = this.state;
    const suggestionIcon = new L.Icon({
      iconSize: [ 23, 37 ],
      iconUrl: require('../images/marker-icon-grey.png'),
      iconRetinaUrl: require('../images/marker-icon-2x-grey.png')
    });
    return (
      <div>
        {searchResults.map(({ id, lat, lon, tags }) => {
          const __html = toHtml(tags);

          return (
            <Marker key={id} position={L.latLng(lat, lon)}>
              {__html && <Popup autoPan={false}><span dangerouslySetInnerHTML={{ __html }}/></Popup>}
            </Marker>
          );
        })}

        {highlightedSearchSuggestion &&
          <Marker 
            key={highlightedSearchSuggestion.id} 
            position={L.latLng(highlightedSearchSuggestion.lat, highlightedSearchSuggestion.lon)}
            icon={suggestionIcon}>
          </Marker>
          }
      </div>
    );
  }
}

SearchResults.propTypes = {
  highlightedSearchSuggestion: React.PropTypes.any,
  searchResults: React.PropTypes.array
};<commit_msg>#1: search results component can be actually stateless<commit_after>import React from 'react';
import { toHtml } from '../poiTypes';
import { Marker, Popup } from 'react-leaflet';

export default class SearchResults extends React.Component {
  render() {
    const {searchResults, highlightedSearchSuggestion} = this.props;
    const suggestionIcon = new L.Icon({
      iconSize: [ 23, 37 ],
      iconUrl: require('../images/marker-icon-grey.png'),
      iconRetinaUrl: require('../images/marker-icon-2x-grey.png')
    });
    return (
      <div>
        {searchResults.map(({ id, lat, lon, tags }) => {
          const __html = toHtml(tags);

          return (
            <Marker key={id} position={L.latLng(lat, lon)}>
              {__html && <Popup autoPan={false}><span dangerouslySetInnerHTML={{ __html }}/></Popup>}
            </Marker>
          );
        })}

        {highlightedSearchSuggestion &&
          <Marker 
            key={highlightedSearchSuggestion.id} 
            position={L.latLng(highlightedSearchSuggestion.lat, highlightedSearchSuggestion.lon)}
            icon={suggestionIcon}>
          </Marker>
          }
      </div>
    );
  }
}

SearchResults.propTypes = {
  highlightedSearchSuggestion: React.PropTypes.any,
  searchResults: React.PropTypes.array
};
{'fraction_non_alphanumeric': 0.13489527866524673, 'fraction_numerical': 0.0039048633297834577, 'mean_word_length': 2.622107969151671, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7197969', 'n_tokens_mistral': 857, 'n_tokens_neox': 817, 'n_words': 156}