tidied things up before submission

content/posts/thinking-react.mdx

@@ -297,7 +297,7 @@ We saved ourselves a lot of anguish by building our slider out of
 the basic HTML5 range slider. Our getters/setters are passed down from the component root, 
 and we use the standard DOM event 'onChange' to update the slider.
 
-```js
+```jsx
 const Map = ({ width, height, bgColor, dragging }) => (
     <div className="map" style={{ width, height }}>
       <div className="color-bg" style={{ backgroundColor: bgColor }}>
@@ -324,7 +324,7 @@ report back where the user has clicked/selected. We've jazzed things up a bit,
 and use [react-draggable](https://www.npmjs.com/package/react-draggable)
 to give us the ability to drag the target slider around. 
 
-```js
+```jsx
 const ColorDisplay = ({ color }) => {
   if (color) {
     let hex = color.toHexString()

src/components/ColorPicker.js

@@ -12,8 +12,8 @@ const ColorPicker = ({ width, height }) => {
 
   const movePointer = (x, y, updateStyle) => {
     setPointPos([x, y])
-    if (updateStyle){
-      return {transform: `translate(${x}, ${y})`}
+    if (updateStyle) {
+      return { transform: `translate(${x}, ${y})` }
     }
   }
 

src/components/Map.js

@@ -4,21 +4,28 @@ import Draggable from "react-draggable"
 import "./Map.css"
 
 const Map = ({ width, height, bgColor, dragging, target }) => {
-  let [x,y] = target;
-  let pointerStyle = {};
+  let pointerStyle = {}
+  let [x, y] = target
+
   return (
     <div className="map" style={{ width, height }}>
-      <div className="color-bg" style={{ backgroundColor: bgColor }}
+      <div
+        className="color-bg"
+        style={{ backgroundColor: bgColor }}
         onMouseDown={e => {
-          pointerStyle = dragging(e.nativeEvent.offsetX, e.nativeEvent.offsetY, true)
+          pointerStyle = dragging(
+            e.nativeEvent.offsetX,
+            e.nativeEvent.offsetY,
+            true
+          )
         }}
       >
         <div className="overlay" />
       </div>
       <Draggable
         bounds="parent"
         defaultPosition={{ x: width / 2, y: height / 2 }}
-        position={{x,y}}
+        position={{ x, y }}
         onDrag={(e, data) => dragging(data.x, data.y)}
       >
         <div className="pointer" style={pointerStyle}></div>