-1

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
       }
Grant mitchell
  • 277
  • 1
  • 2
  • 12
  • 2
    Objects are compared by their references. If you change a property of an object, it doesn't change the reference, so React will not notice a change. You will need to assign a [deep clone](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript#122704) of the original object to the state if you want React to get the message and render the new state. – samuei Nov 23 '22 at 22:04
  • well the state changes, but that doesnt explain why the formgroup doesnt render anything at all, not even an empty div with class formGroup – Grant mitchell Nov 23 '22 at 22:13

1 Answers1

0

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

Grant mitchell
  • 277
  • 1
  • 2
  • 12