Babel constructor only being called once

[davidpelaez]

I have googled everywhere and I cannot find someone with a similar complain regarding React, so I would appreciate it if you take a moment and see if this could be a bug in Storybook. Consider this component:

import React, { Component, PropTypes } from 'react';
import { hh, div, input, pre } from 'react-hyperscript-helpers';

class MailInput extends Component {
  constructor(props) {
    super(props);
    // ----->> ******* THIS IS ONLY CALLED ONCE EVEN THOUGH I HAVE 2 INSTANCES
    alert(JSON.stringify(props));
    // *******  <<<---- 
    this.state = {text: props.text}
  }


  static defaultProps = {
    text: " "
  }

  static propTypes = {
    text: React.PropTypes.string.isRequired
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      text: nextProps.text
    });
  }

  updateText = (e) => {
    this.setState({
      text: e.target.value,
    });
  }


  render() {

    let stateDebug = pre(["STATE:",JSON.stringify(this.state)]);
    let propsDebug = pre(["PROPS:",JSON.stringify(this.props)]);

    const regularExp =  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    let currentText = this.state.text;
    let validText = regularExp.test(currentText);
    return (
      <div>
        <input
          type="email"
          value={currentText}
          onChange={this.updateText} />
        {[stateDebug, propsDebug]}
      </div>
    )
  }
}

export default MailInput;

And this story definition:

import React from 'react';
import MailInput from './component';
import MailInput2 from './component';
import { h } from 'react-hyperscript-helpers';

import { storiesOf, action } from '@kadira/storybook';

storiesOf('MailInput', module)
  .add('valid', () => {
    return h(MailInput,{text: '[email protected]'})
  })

  .add('not valid', () => {
    return h(MailInput2,{text: '[email protected]'})
  });

This uses hyperscript (I wanted to check it wasn't an issue with JSX, but it behaves exactly the same). Basically the alert on the constructor of the component is only triggered once, even though there are two instances of the component, one per story.

If I render in the root element of my app the following component with two instances of MailInput I get expected alert twice:

import React from 'react';
import MailInput from './MailInput/component';
import { h,div } from 'react-hyperscript-helpers';

export default (props) => {
  return div([
    h(MailInput,{text: '[email protected]'}),
    h(MailInput,{text: '[email protected]'})
  ]);
}

I have verified that this problem only happens inside storybook, but I cannot explain why. I don't see how the instantiation of the controller would be affected. Maybe it has something to do with hot-reload?

[davidpelaez]

As a result of this problem, the state of the second instance is for some reason whatever the initial state was on the first one.

[bhishp]

+1. I find that I am unable to utilise defaultProps when creating multiple stories for a given component

[arunoda]

I think I know the issue.
We need to unmount the existing component in the DOM, before rendering the new one.

See: ReactDOM.unmountComponentAtNode()

[arunoda]

Check version: v1.10.0. I did a fix for that.

[bhishp]

Yeah, works for me. Cheers

[arunoda]

Great. Closing this then.

[davidpelaez]

Works like a charm. Thanks @arunoda