反应集 state 不重新渲染组件

Question

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
       }

Answer 1

I realized my issue was because the radio button was not a boolean it was a string. so it was always true.