Is duplicating state of props the only way to go in React.js? - state

Question

Take a look at the source code given below. It models a form that is composed out of two WHOIS components and a radio button group. The radio button determines the WHOIS component that is selected. Once the selected WHOIS component is valid the form should be submittable and emit the data of the selected WHOIS.
/** #jsx React.DOM */
var Publish = React.createClass({
getInitialState: function() {
return {
type: 'intern',
intern: {
domain: '',
valid: false
},
extern: {
domain: '',
valid: false
}
};
},
updateWhois: function(type, domain, state) {
var newState = {};
newState[type] = {
domain: domain,
valid: state === 'free'
};
this.setState(newState);
},
switchTo: function(type) {
this.setState({
type: type
});
},
isValid: function() {
var type = this.state.type;
var typeState = this.state[type];
return typeState.valid;
},
render: function() {
return (
<form className="publish">
<div>
<input name="publish-type" type="radio" checked={this.state.type === 'intern'} onChange={this.switchTo.bind(this, 'intern')} />
<Whois onFocus={this.switchTo.bind(this, 'intern')} onChange={this.updateWhois.bind(this, 'intern')} />
</div>
<div>
<input name="publish-type" type="radio" checked={this.state.type === 'extern'} onChange={this.switchTo.bind(this, 'extern')} />
<Whois onFocus={this.switchTo.bind(this, 'extern')} onChange={this.updateWhois.bind(this, 'extern')} />
</div>
<input type="submit" disabled={!this.isValid()} />
</form>
);
}
});
This code works perfectly. However I feel I am duplicating the state of the child components. How could I improve this example? Upon submit I would rather query the Whois component directly (for example an .getDomain method), but I have not clue if and how I should do so in ReactJs.

Answer 1

I feel as though there's nothing directly wrong with your example here, as there are different paradigms you can use when writing ReactJS components. If you do want to read from a rendered component, look at the methods in more about refs. Adding a ref property to your whois like so:
<Whois onFocus={this.switchTo.bind(this, 'intern')} onChange={this.updateWhois.bind(this, 'intern')} ref="whoIs1" />
this.refs.whoIs1.getDOMNode();
would make it possible to look at the component after it has been rendered into the DOM. Using the event argument inside a handler for your onChange method would also be a good option, as you can query the component's state out of the properties on event.