placing child component inside parent in reactjs - reactjs

Question

I am trying to build a form with custom input fields. Problem is structure of form is not pre known. And i want it to abstract as many common functionalities as i can. So i created a form component which will actually take care of storing value of all input components and action on submit. Rest inside form how html should be that will be written by the user.
here is a snapshot:
a custom input field:
class InputField extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
id: this.props.id,
value: this.props.value || '',
valid: this.props.isValidationRequired || this.props.required ? true : false,
errorVisible: false,
errorMessage: ''
};
}
//different helper and conchange function
render() {
let props = this._getInputFieldProps();
return (<div className={this.props.fieldParentClass}>
<label for={this.props.id}>{this.props.name}</label>
<input {...props}/>
<span className={this.state.errorVisible ? 'show' : 'hide'}>{this.state.errorMessage}</span>
</div>)
}
}
export default InputField;
form:-
class FormComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
submitButton: {
buttonClasses: ['btn-default', 'vy-btn-secondary'],
buttonText: "SUBMIT",
}
};
}
//functions for storing values of children and submit
render() {
return <form role="form" class="vm-form">
<Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button>
</form>
}
}
export default FormComponent;
and caller class:-
class LeadDetails extends React.Component {
constructor(HttpService, $state, VymoDataService, props, context) {
super(props, context);
}
render() {
return (<FormComponent >
<InputField placeholder='hi' value="1"
type="text"
id="name"
maxlength="10"></InputField>
</FormComponent>)
}
}
so now i can wrap my input field component in some html wrapper and customise the look the way i want. But here only form is getting render not input field, neither its behaving as child.
Have I got it totally wrong in some way. What should have been my approach?

Answer 1

In your FormComponent render method, you need to render the "children", which will be located on this.props.children:
render() {
return <form role="form" class="vm-form">
{this.props.children}
<Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button>
</form>
}
The reason for this is when you go to actually create (instantiate) the form, you are doing the following:
<FormComponent >
<InputField placeholder='hi' value="1"
type="text"
id="name"
maxlength="10"></InputField>
</FormComponent>
The stuff in between the component tags are the "children". The children are passed to your component during instantiation (props.children), it's up to the component to render those children. The reason you are probably expecting the children to be rendered automatically is because React treats <ReactComponents> differently from <normal-dom-elements>.
Whenever react sees a <Tag> which begins with an upper case letter, it assumes that it's a react component and basically converts this:
<Tag foo="bar"><div>hello</div></Tag>
to something like this:
new Tag({
foo: "bar",
children: React.createElement('div', null, "hello")
})