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

Question

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
            }
        }
    }

Hayato · Accepted Answer · 2021-11-08 06:16:35Z

2

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.
}

answered Nov 8, 2021 at 6:16

Hayato

743 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

langyinan Over a year ago

Thank you, I actually notice the problem: the comparison between array shouldn't be done like this. Instead, use JSON.stringify(last_select) === JSON.stringify([x, y]). However this statement is also error pruning due to some cases where string conversion can cause error, but since I'm only using it to store int, it is fine. Thank you for your answer!

Hayato Over a year ago

Glad you got it working! :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related