Lets say I have a view component that has a conditional render:

```
render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

```

MyInput looks something like this:

```
class MyInput extends React.Component {

    ...

    render(){
        return (
            <div>
                <input name={this.props.name} 
                    ref="input" 
                    type="text" 
                    value={this.props.value || null}
                    onBlur={this.handleBlur.bind(this)}
                    onChange={this.handleTyping.bind(this)} />
            </div>
        );
    }
}

```

Lets say `employed` is true. Whenever I switch it to false and the other view renders, only `unemployment-duration` is re-initialized. Also `unemployment-reason` gets prefilled with the value from `job-title` (if a value was given before the condition changed).

If I change the markup in the second rendering routine to something like this:

```
render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

```

It seems like everything works fine. Looks like React just fails to diff 'job-title' and 'unemployment-reason'.

Please tell me what I'm doing wrong...