InputField.tsx

class InputField extends React.Component<InputFieldProps, any>
{
	componentDidMount()
	{
		//	Manually trigger validation rules to test whether the values set are ok or not
		this.props.onChange({
			target:{
				value:this.props.value
			}
		});
	}

    render() {
        return (
            <div className="input-field">
                <Col md={12}>
                    <label className="control-label">{this.props.label}</label>
                </Col>
                <Col md={4}>
                    <Input type="text"
			   hasFeedback
			   bsStyle={this.props.valid ? "success" : "error"}
			   defaultValue={this.props.value}
			   onChange={this.props.onChange} />
                </Col>
                <Col md={8}>
                    {this.props.children}
                </Col>
            </div>
        );
    }
}

Inventory.tsx

class Inventory extends React.Component<IInventoryProps, IInventoryState> {
	//......lots of other code here
	
	return _.map(this.props.mediationNetwork.networkParameters,(param,index:string) => {
			if(!param || typeof(this.state.fields[param]) == "undefined"){
				return;
			}

			let field:CpNetworkConfigField = this.state.fields[param];

			let label	= this.props.text[param];
			let value	= this.state.networkParameters[index];
			let format	= field.format || "none";
			let enabled	= this.state.supportedFormats[format] || false;
			let valid	= field.isValid;
			let text	= this.props.text[param+"_label"];
			let cbChange	= this.onChange.bind(this,field.validator,param);
			let cbToggle	= this.onToggleFormat.bind(this,format);

			if(!param || !index || !field.type || !label){
				console.log("skipping field",[param,index,field.type,label]);
				return;
			}

			console.log("actual field[2] = ",field);

			switch(field.type){
				case "input":{
					return (
						<Row key={index}>
							<InputField label={label} value={value}
								valid={valid} onChange={cbChange}>
								{text}
							</InputField>
						</Row>
					);
				}

				case "toggle":{
					return (
						<Row key={index}>
							<ToggleField label={label}  enabled={enabled}
								 value={value} valid={valid}
								 onChange={cbChange}  onToggle={cbToggle}>
								{text}
							</ToggleField>
						</Row>
					);
				}
			}
		});
	}
	
	/// ..... other code
	
	private onChange (validator:string, field:string, event:any)
	{
		let result = new RegExp(validator).test(event.target.value);

		console.log("onChange["+field+"], expected isValid = ",result);

		let t = Immutable.fromJS(this.state)
			.mergeDeep({
				fields: Immutable.Map().set(field, {
					isValid: result
				}).toJS()
			})
			.toJS();

		this.setState(
			t,
			() => {
				console.log("onChange["+field+"] actual field[1] = ",this.state.fields[field]);
			}
		);

		console.log("requested state tree = ",t);
	}