Home > Mobile >  array is cleared when its function is called with another function in an onclick attribute
array is cleared when its function is called with another function in an onclick attribute

Time:07-17

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([]);
  • Related