Question

0

346

Views

React onClick function variable undefined, but should work during runtime, how should I fix this?

I have an onclick function called Selection and I call it in the functional component.

I have multiple buttons but I want only one of them to be selected at the same time, thus written such a function and all of the button share the same onclick function Selection().

However, this return's variable undefined error due to that boardSetHooks access of the last_select variable. If I understand my code correctly, when that else statement is executed, no such case that last_selected[0] will be undefined since it will be caught by the first if statement.

How should I solve this? I am doing some research and I'm not sure which solution or direction I should look into: using useEffect() or using bind?

var last_select = []

export default function Grid() {

    function Selection(x, y){
        if (last_select === []) {
            if (board[x][y][0] !== "" && board[x][y][0][0] === 'W'){
                boardSetHooks[x][y]([board[x][y][0], true])
                last_select = [x, y]
                return
            }
        }
        else {
            if (last_select === [x, y]) {
                boardSetHooks[x][y]([board[x][y][0], false])
                last_select = []
                return
            }
            else {
                boardSetHooks[last_select[0]][last_select[1]]([board[last_select[0]][last_select[1]][0], false])
                boardSetHooks[x][y]([board[x][y][0], true])
                last_select = [x, y]
                return
            }
        }
    }

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T14:49:50.109Z

Each of the "return" statements do not actually return anything. What should they be returning? If you want to ALWAYS return last_select, then:
1. Remove all your returns
2. At the END of Selection, return last_select;
After formatting your code a bit, you can see there may be a situation where your if-else statement does not cover all possibilities.

function Selection(x, y) {
    if (last_select === []) {
        if (board[x][y][0] !== "" && board[x][y][0][0] === 'W'){
            boardSetHooks[x][y]([board[x][y][0], true])
            last_select = [x, y]
            return // This returns undefined. What should it return?
        }

        // <----- What happens when the above if-condition is false?

    } else if (last_select === [x, y]) {
        boardSetHooks[x][y]([board[x][y][0], false])
        last_select = []
        return // This returns undefined. What should it return?
    } else {
        boardSetHooks[last_select[0]][last_select[1]]([board[last_select[0]][last_select[1]][0], false])
        boardSetHooks[x][y]([board[x][y][0], true])
        last_select = [x, y]
        return // This returns undefined. What should it return?
    }
    return last_select // <--- All of your if-statements assign last_select, so return it here.
}

0

346

React onClick function variable undefined, but should work during runtime, how should I fix this?

1 answers

0

Find remote jobs

Andres GPT