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