title: Higher Order Component: Default Props
body: <p>I have this code and trying to wrap a HOC with a react Class. What I want in the first place is to overwrite one part of the default params. So here is my code (<strong>you don't need to read the whole code</strong>, the question its just about the defaultProps in the HOC) </p>
  
  <p>First the Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  // recompose
  import compose from 'recompose/compose';
  import defaultProps from 'recompose/defaultProps';
  import withState from 'recompose/withState';
  import withHandlers from 'recompose/withHandlers';
  import withProps from 'recompose/withProps';
  // utils
  import { themr } from 'react-css-themr';
  import { suslovkaCoords, generateMarkers } from './utils/fakeData';
  // controls
  import CanvasHoverMap from './controls/Map';
  import HoveredTooltipMarker from './controls/Markers/HoveredTooltipMarker';
  import TooltipMarker from './controls/Markers/TooltipMarker';
  // components
  import RoomTooltip from '../RoomTooltip/RoomTooltip';
  // styles
  import styles from './map.sass';
  import mapStyles from './controls/Map/mapSytles';
  
  const MARKERS_COUNT = 3000;
  
  export const map = ({
    theme,
    style,
    options,
    markerHoverDistance,
    markers,
    renderMarkers,
    renderMarker,
    mapParams: {
      zoom,
      center,
    },
    setMapParams,
    onMapParamsChange,
    selectedMarker,
    setSelectedMarker,
    isMobile,
    refresh,
  }) =&gt; (
    &lt;div className={theme.component}&gt;
      &lt;CanvasHoverMap
        // flex: 1 here
        style={style}
        // google map options https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
        options={options}
        // see CanvasMap onMouseMove, distance at which algorithm decides that marker is hovered
        markerHoverDistance={markerHoverDistance}
        // google-map-react props
        center={center}
        zoom={zoom}
        onChange={onMapParamsChange}
        // canvas markers, and render functions
        markers={markers}
        // render markers at canvas
        renderMarkers={renderMarkers}
        // render hovered marker as is
        renderMarker={renderMarker}
        // to force redraw just pass a new empty object to refresh for example
        refresh={refresh}
        // selected marker always visible over canvas (+ tooltip)
        selectedMarker={selectedMarker}
        setSelectedMarker={setSelectedMarker}
        // mobile-detect
        isMobile={isMobile}
        setMapParams={setMapParams}
      /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Now the HOC:</p>
  
  <pre class="lang-js prettyprint-override"><code>  export const mapHOC = compose(
    themr('map', styles),
    defaultProps({
      options: {
        scrollwheel: true,
        zoomControl: true,
        zoomControlOptions: {
          position: 1, // google.maps.ControlPosition.LEFT_TOP
        },
        minZoom: 3,
        zoom: 10,
        maxZoom: 18,
        // disableDoubleClickZoom: true,
        styles: mapStyles,
      },
      style: {
        flex: 1,
      },
      hoverDistance: 15,
      markerHoverDistance: 15,
      markers: generateMarkers(MARKERS_COUNT, 0.0003),
      }),
    withState('mapParams', 'setMapParams', { center: suslovkaCoords, zoom: 8 }),
    withState('selectedMarker', 'setSelectedMarker', null),
    withProps(({ selectedMarker }) =&gt; ({
      isSelected: (marker) =&gt; selectedMarker
        ? selectedMarker.id === marker.id
        : false,
    })),
    withHandlers({
      onMapParamsChange: ({ setMapParams }) =&gt; ({ center, zoom, bounds }) =&gt; {
        setMapParams({ center, zoom, bounds });
        console.log('setMapParams', { center, zoom });
      },
      renderMarker: ({ theme, setSelectedMarker, isSelected, isMobile }) =&gt; (marker) =&gt; {
        const tooltipMarkerProps = {
          key: marker.id,
          theme: {theme},
          themeNamespace: 'tooltipMarker',
          initialScale: 1,
          defaultScale: 1,
          hoveredScale: 1.3,
          tooltipContent: &lt;RoomTooltip marker={marker} /&gt;,
          paddingOffset: 10, // used for tooltip position
          tooltipContentHeight: 240, // no need to be exact, used for tooltip position
          tooltipContentWidth: 200, // no need to be exact, used for tooltip position
          setSelectedMarker: setSelectedMarker,
          selected: isSelected(marker),
          marker: marker,
          ...marker,
        };
        return isMobile
          ? &lt;TooltipMarker {...tooltipMarkerProps } /&gt;
          : &lt;HoveredTooltipMarker {...tooltipMarkerProps} /&gt;;
      },
      // be sure in current implementation markers is tile markers, not all markers.
      // tiling is used as it allows some perf optimizations not used here
      renderMarkers: () =&gt; ({ ctx, markers, tileSize }) =&gt; {
        ctx.clearRect(0, 0, tileSize, tileSize);
        const radius = 5;
        markers.forEach(({ /* id, */ x, y }) =&gt; {
          // just circles here but can be images, use id or other marker props to render
          ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
          ctx.beginPath();
          ctx.arc(x, y, radius + 3, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
  
          ctx.fillStyle = 'white';
          ctx.beginPath();
          ctx.arc(x, y, radius + 2, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
  
          ctx.fillStyle = '#00b92a';
          ctx.beginPath();
          ctx.arc(x, y, radius, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
        });
      },
    }),
  );
  </code></pre>
  
  <p>I would like to remove  "markers: generateMarkers(MARKERS_COUNT, 0.0003)" from defaultProps and give the markers from the outside.</p>
  
  <p>What I tried so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>const newmap = mapHOC(map);
  class MapWithState extends React.Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          const markers = generateMarkers(MARKERS_COUNT, 0.0003);
          return (&lt;newmap markers={markers} /&gt;);
      }
  }
  export default MapWithState;
  //export default  mapHOC(map);
  </code></pre>
  
  <p>Any idea how to do something like this? I hope that it can be done without much trouble. Thanks!</p>