Merge pull request #413 from CraveFood/initial-amountselector

AmountSelectors should render its initial value

Author: fgameiro

packages/amount-selectors/src/components/AmountSelectors.js

@@ -19,15 +19,19 @@ const selectorSizeToFontSize = {
 };
 
 class AmountSelectors extends React.Component {
-  state = {
-    value: 0,
-    disableBoth: false,
-    tooltipText: "",
-    displayValue: ""
-  };
+  constructor(props) {
+    super(props);
 
-  componentDidMount() {
-    this.updateStateWithNewValue(this.props.value);
+    const { value } = this.props;
+    const parsedValue = parseFloat(value) || 0;
+    const displayValue = parsedValue.toFixed(2);
+
+    this.state = {
+      value: Number(displayValue),
+      disableBoth: false,
+      tooltipText: "",
+      displayValue
+    };
   }
 
   componentDidUpdate(prevProps, prevState) {

packages/amount-selectors/src/components/AmountSelectors.story.js

@@ -40,6 +40,10 @@ storiesOf("Amount selectors", module)
     "With a max value of 3",
     withInfo()(() => <AmountSelectors max={3} value={2} step={0.5} />)
   )
+  .add(
+    "With a max value of 3 and initial value = 5",
+    withInfo()(() => <AmountSelectors max={3} value={5} />)
+  )
   .add(
     "With onChange function",
     withInfo()(() => <AmountSelectors onChange={action("amount changed")} />)