title: React - check if element is visible in DOM
body: <p>I'm building a form - series of questions (radio buttons) the user needs to answer before he can move on to the next screen. For fields validation I'm using yup (npm package) and redux as state management.</p>
  
  <p>For one particular scenario/combination a new screen (div) is revealed asking for a confirmation (checkbox) before the user can proceed. I want to apply the validation for this checkbox only if displayed.</p>
  
  <p><strong>How can I check if an element (div) is displayed in the DOM using React?</strong></p>
  
  <p>The way I thought of doing it was to set a varibale 'isScreenVisible' to false and if the conditions are met I would change the state to 'true'.</p>
  
  <p>I'm doing that check and setting 'isScreenVisible' to true or false in _renderScreen() but for some reason it's going into an infinite loop.</p>
  
  <p>My code:</p>
  
  <pre><code>class Component extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        formisValid: true,
        errors: {},
        isScreenVisible: false
      }
  
      this.FormValidator = new Validate();
      this.FormValidator.setValidationSchema(this.getValidationSchema());
    }
  
    areThereErrors(errors) {
      var key, er = false;
      for(key in errors) {
        if(errors[key]) {er = true}
      }
      return er;
    }
  
    getValidationSchema() {
      return yup.object().shape({
        TravelInsurance: yup.string().min(1).required("Please select an option"),
        MobilePhoneInsurance: yup.string().min(1).required("Please select an option"),
        Confirmation: yup.string().min(1).required("Please confirm"),
      });
    }
  
    //values of form fields
    getValidationObject() {
      let openConfirmation = (this.props.store.Confirmation === true)? 'confirmed': ''
  
      return {
        TravelInsurance: this.props.store.TravelInsurance,
        MobilePhoneInsurance: this.props.store.MobilePhoneInsurance,
        Confirmation: openConfirmation,
      }
    }
  
    setSubmitErrors(errors) {
      this.setState({errors: errors});
    }
  
    submitForm() {
      var isErrored, prom, scope = this, obj = this.getValidationObject();
      prom = this.FormValidator.validateSubmit(obj);
  
      prom.then((errors) =&gt; {
        isErrored = this.FormValidator.isFormErrored();
  
        scope.setState({errors: errors}, () =&gt; {
          if (isErrored) {
          } else {
            this.context.router.push('/Confirm');
          }
        });
      });
    }
  
    saveData(e) {
      let data = {}
      data[e.target.name] = e.target.value
  
      this.props.addData(data)
  
      this.props.addData({
        Confirmation: e.target.checked
      })
    }
  
    _renderScreen = () =&gt; {
      const {
        Confirmation
      } = this.props.store
  
      if(typeof(this.props.store.TravelInsurance) !== 'undefined' &amp;&amp; typeof(this.props.store.MobilePhoneInsurance) !== 'undefined') &amp;&amp;
      ((this.props.store.TravelInsurance === 'Yes' &amp;&amp; this.props.store.MobilePhoneInsurance === 'No') ||
      (this.props.store.TravelInsurance === 'No' &amp;&amp; this.props.store.MobilePhoneInsurance === 'Yes')){
  
          this.setState({
              isScreenVisible: true
          })
  
            return(
              &lt;div&gt;
                  &lt;p&gt;Please confirm that you want to proceed&lt;/p&gt;
  
                    &lt;CheckboxField
                      id="Confirmation"
                      name="Confirmation"
                      value={Confirmation}
                      validationMessage={this.state.errors.Confirmation}
                      label="I confirm that I would like to continue"
                      defaultChecked={!!Confirmation}
                      onClick={(e)=&gt; {this.saveData(e)} }
                    /&gt;
                  &lt;/FormLabel&gt;
              &lt;/div&gt;
            )
        }
        else{
          this.setState({
              isScreenVisible: false
          })
        }
    }
  
    render(){
      const {
        TravelInsurance,
        MobilePhoneInsurance
      } = this.props.store
  
      return (
        &lt;div&gt;           
            &lt;RadioButtonGroup
              id="TravelInsurance"
              name="TravelInsurance"
              checked={TravelInsurance}
              onClick={this.saveData.bind(this)}
              options={{
                'Yes': 'Yes',
                'No': 'No'
              }}
              validationMessage={(this.state.errors.TravelInsurance) ? this.state.errors.TravelInsurance : null }
            /&gt;
  
          &lt;RadioButtonGroup
            id="MobilePhoneInsurance"
            name="MobilePhoneInsurance"
            checked={MobilePhoneInsurance}
            onClick={this.saveData.bind(this)}
            options={{
              'Yes': 'Yes',
              'No': 'No'
            }}
            validationMessage={(this.state.errors.MobilePhoneInsurance) ? this.state.errors.MobilePhoneInsurance : null }
          /&gt;
  
          this._renderScreen()
  
          &lt;ButtonRow
              primaryProps={{
                  children: 'Continue',
                  onClick: e=&gt;{
                  this.submitForm();
              }
          }}
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      store: state.Insurance,
    }
  }
  
  const Insurance = connect(mapStateToProps,{addData})(Component)
  
  export default Insurance
  </code></pre>