How to make React slick slider work with icons?

Question

There is a code that displays icons

switch (name) {
    case Header.Arrows.name:
        return <ArrowsComponent key={name} color={color}/>;
    case Header.Zoom.name:
        return <ZoomTool key={name} color={color}/>;
    default:
        return null;
    }

I want to not just display them but do it using the react slick slider. ArrowsComponent and ZoomTool are the components for icons. How to properly wrap this code in <Slider> .. </Slider>?

Answer 1

Here are my two ways

Method 1:

switch (name) {
    case Header.Arrows.name:
        return (
          <Slider>
            <ArrowsComponent key={name} color={color}/>
          </Slider>
        );
    case Header.Zoom.name:
        return (
          <Slider>
            <ZoomTool key={name} color={color}/>
          </Slider>
        );
    default:
        return null;
    }

Method 2

const renderSlider = (child) => {
  return (
    <Slider>
      {child}
    </Slider>
  );
};

switch (name) {
    case Header.Arrows.name:
        renderSlider(<ArrowsComponent key={name} color={color}/>);
    case Header.Zoom.name:
        renderSlider(<ZoomTool key={name} color={color}/>);
    default:
        return null;
    }

Hope that helps.