fancy-rectangle.jsx

[/* list of (rectangle + gradient) properties*/].map(
  ({ rectangle, gradient }) => 
    <FancyRectangle 
      x={rectangle.x}
      y={rectangle.y}
      width={60}
      height={60}
      gradientStart={gradient.start}
      gradientEnd={gradient.end}
    />
);

const FancyRectangle = props => (
  /*
    render a <rect /> &
    render a <linearGradient />
  */
);