When i use a ternary expression in react render method it renders the false component fine. when set to true nothing happens however when i log state it's updated with true. so this is really confusing. i even tried it with ternary string return and that worked fine, its just the component that wont work. I also found that it renders both when i wrap FormGroup in a empty div. this is really weird. What's supposed to happen is when i click the radio button it will set state to true and variantForm will be true having the ternary return a diff component.
my state on init
{variantForm: false}
after radio button clicked to true
{variantForm: true}
component did mount
this.productForm.current.controls.hasVariants.current.valueChanges().subscribe(boolean=>{
this.setState({variantForm:boolean},()=>{
console.log(this.state);
})
})
inside render method
<div className="dashboard-body">
<p>{this.state.variantForm? 'true':'false'}</p> // works
<FormGroup ref={this.productForm} groupName="productForm">
<FormControl element={InputField} fieldName="productName" label="Product Name"></FormControl>
<FormControl defaultValue={false} element={RadioGroupField} fieldName="hasVariants" label="Has Variants"></FormControl>
</FormGroup>
{this.state.variantForm? <FormGroup ref={this.productLowerForm} groupName="variantForm">
<FormControl element={InputField} fieldName="variantName" label="Variant Name"></FormControl>
</FormGroup> :
<FormGroup ref={this.productLowerForm} groupName="productLowerForm">
<FormControl element={InputField} fieldName="productName" label="Product Name"></FormControl>
<FormControl element={InputField} fieldName="bin" label="Bin"></FormControl>
<FormControl element={InputField} fieldName="quantity" label="Quantity"></FormControl>
</FormGroup>
}
</div>
what worked but not sure why was
{this.state.variantForm?
<div><FormGroup ref={this.productLowerForm} groupName="variantForm">
<FormControl element={InputField} fieldName="variantName" label="Variant Name"></FormControl>
</FormGroup></div> :
<FormGroup ref={this.productLowerForm} groupName="productLowerForm">
<FormControl element={InputField} fieldName="productName" label="Product Name"></FormControl>
<FormControl element={InputField} fieldName="bin" label="Bin"></FormControl>
<FormControl element={InputField} fieldName="quantity" label="Quantity"></FormControl>
</FormGroup>
}
if your wondering what FormGroup returns its the react fragment because no container was provided
<div className="formGroup">
{this.props.container ? <this.props.container>{this.clonedChildren}</this.props.container> : <React.Fragment>{this.clonedChildren}</React.Fragment>}
</div>)
this also works?
{this.state.variantForm === true?
<FormGroup ref={this.productLowerForm} groupName="variantForm">
<FormControl element={InputField} fieldName="variantName" label="Variant Name"></FormControl>
</FormGroup> : null}
{this.state.variantForm === false?
<FormGroup ref={this.productLowerForm} groupName="productLowerForm">
<FormControl element={InputField} fieldName="productName" label="Product Name"></FormControl>
<FormControl element={InputField} fieldName="bin" label="Bin"></FormControl>
<FormControl element={InputField} fieldName="quantity" label="Quantity"></FormControl>
</FormGroup>: null
}
