lundi 8 janvier 2018

React - conditional causes variables to not be assigned

I am getting the following error x is not defined for variables that I am defining before my return function in React. The variables call on constants that I am importing at the top of my component.

Originally, I simply defined the variables and then ran my return function, but then realized I needed to add some logic to change the variables based on the request coming in from the user. It was when I added this if/else that the feature broke. Here is the relevant code, the first works the second one does not work.

WORKS:

else if (this.state.form_submitted == true) {
      let parentCat = PERSONAL_IMPROVEMENTS[this.state.filters.categories],
          childCat =  PERSONAL_IMPROVEMENT_OPTIONS[this.state.filters.categories][this.state.filters.personal_categories],
          resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
            ? (<h3 className="text-slate">Based on your request for a coach to help you with {parentCat} - specifically with {childCat}, we recommend these coaches</h3>)
            : null,
          popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
            ? (<h3 className="text-slate">Most Popular Coaches</h3>)
            : null;

      return(
        <div className="">
          <div className="search-results">
            {b2b_link}
            {resultsHeader}
            <div className="coach-card-list">
              {this.renderCoaches()}
            </div>
            {popularCoachesHeader}
            <div className="coach-card-list">
              {this.renderPopularCoaches()}
            </div>
            <div className="revise-recommendation-form">
              {revise_recommendations}
            </div>
          </div>
          {warning_modal}
        </div>
      )
    }

THIS DOES NOT WORK:

else if (this.state.form_submitted == true) {
      if (this.state.filters.client_type == "my_team_or_employees") {
        debugger
        let b2bChallenge = B2B_CHALLENGE_OPTIONS[this.state.filters.b2b_challenge],
            resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
              ? (<h3 className="text-slate">Based on your request for a coach to help your team with {b2bChallenge}, we recommend these coaches</h3>)
              : null,
            popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
              ? (<h3 className="text-slate">Most Popular Coaches</h3>)
              : null;
      }
      else {
        debugger
        let parentCat = PERSONAL_IMPROVEMENTS[this.state.filters.categories],
            childCat =  PERSONAL_IMPROVEMENT_OPTIONS[this.state.filters.categories][this.state.filters.personal_categories],
            resultsHeader = this.state.coaches != null && this.state.coaches.length > 0
              ? (<h3 className="text-slate">Based on your request for a coach to help you with {parentCat} - specifically with {childCat}, we recommend these coaches</h3>)
              : null,
            popularCoachesHeader = this.state.popular_coaches != null && this.state.popular_coaches.length > 0
              ? (<h3 className="text-slate">Most Popular Coaches</h3>)
              : null;
      }

      return(
        <div className="">
          <div className="search-results">
            {b2b_link}
            {resultsHeader}
            <div className="coach-card-list">
              {this.renderCoaches()}
            </div>
            {popularCoachesHeader}
            <div className="coach-card-list">
              {this.renderPopularCoaches()}
            </div>
            <div className="revise-recommendation-form">
              {revise_recommendations}
            </div>
          </div>
          {warning_modal}
        </div>
      )
    }

Aucun commentaire:

Enregistrer un commentaire