I have two parent divs each of them has 5 child divs, onClick on one of the child divs a function that changes the class name is called and onDoubleClick on the child div a function is called to pop the last element from an array and push a certain value.
then a condition is executed on the values of the two array. the problem is the first array always sent empty to the condition but in case of I deleted the part on the onClick function, the array is sent correctly to the condition.
what could be the problem.
import React, { Component, useEffect, useState } from "react";
const Survey = () => {
const array1 = [];
const array2 = [];
const [classA, setClassA] = useState();
const handleClassA = (id) => {
setClassA(id);
}
const handleArray1 = (id) => {
array1.pop();
array1.push(id);
console.log('array1', array1);
}
const [classB, setClassB] = useState();
const handleClassB = (id) => {
setClassB(id);
}
const handleArray2 = (id) => {
array2.pop();
array2.push(id);
console.log('array2', array2);
}
const Quiz = () => {
if (array1.includes(0) || array1.includes(1) || array1.includes(2)) {
console.log('one is 0,1,2');
if (array2.includes(0) || array2.includes(1) || array2.includes(2)) {
console.log('two is 0,1,2');
} else if (array2.includes(3) || array2.includes(4)) {
console.log('counseling');
setResult("Counseling2");
}
} else if (array1.includes(3) || array1.includes(4)) {
console.log('one is 3,4');
if (array2.includes(0) || array2.includes(1) || array2.includes(2)) {
console.log('two is 0, 1,2');
}
} else if (array2.includes(3) || array2.includes(4)) {
console.log('two is 3,4');
console.log('therapy');
setResult("Therapy")
}
}
console.log('quiz done');
console.log(array1);
console.log(array2);
}
return(
<div className="survey_questions">
<div className="survey_q_1">
<p id="q_1">I’m concerned about a behavior, feeling, or something I’m doing.</p>
<div className="survey_a_1">
<div
className={classA === 0 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassA(0);
}}
onDoubleClick={() => { handleArray1(0) }}
>
not at all
</div>
<div
className={classA === 1 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassA(1);
}}
onDoubleClick={() => { handleArray1(1) }}
>
just a little
</div>
<div
className={classA === 2 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassA(2);
}}
onDoubleClick={() => { handleArray1(2) }}
>
moderately
</div>
<div
className={classA === 3 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassA(3);
}}
onDoubleClick={() => { handleArray1(3) }}
>
quite a lot
</div>
<div
className={classA === 4 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassA(4);
}}
onDoubleClick={() => { handleArray1(4) }}
>
very much
</div>
</div>
</div >
<div className="survey_q_1">
<p id="q_1">This behavior or feeling has been getting worse in the past few weeks.</p>
<div className="survey_a_1">
<div
className={classB === 5 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassB(5);
}}
onDoubleClick={() => { handleArray2(0) }}>
not at all
</div>
<div
className={classB === 6 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassB(6);
}}
onDoubleClick={() => { handleArray2(1) }}>
just a little
</div>
<div
className={classB === 7 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassB(7);
}}
onDoubleClick={() => { handleArray2(2) }}>
moderately
</div>
<div
className={classB === 8 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassB(8);
}}
onDoubleClick={() => { handleArray2(3) }}>
quite a lot
</div>
<div
className={classB === 9 ? "survey_a_active" : "survey_a"}
id="a_1"
onClick={() => {
handleClassB(9);
}}
onDoubleClick={() => { handleArray2(4) }}>
very much
</div>
</div>
</div >
</div>
)
}
export default Survey;
CodePudding user response:
React Functional component will execute the component(function) itself every time it re-render.
In your case, your array1 and array 2 are not a state, every time component re-render, your array will be [ ] as you declare it.
const array1 = [];
const array2 = [];
wrap it into state as:
const [array1, setArray1] = useState([]);
const [array2, setArray2] = useState([]);
CodePudding user response:
I solved the problem by using useState, thanks to all who helped me.
const [array1, setArray1] = useState([]);
const [array2, setArray2] = useState([]);