Change input mask based on selectedButton in React JS

user_13272900 0
Viewed 175

I have some input masks on my code, a grid of buttons, and I have a state that stores which button is selected, and based on the selected button I want to change the mask applied to the input.

The state:

const [selectedButton, setSelectedButton] = React.useState("");

I've tried this:

const [input, setInput] = useMask(
    selectedButton === "Key1" ? maskOne : maskTwo
  );

It works perfectly! But only with 2 masks, I have 4 different masks, and I need some switch case type structure to choose which mask to apply

react-hooks reactjs
1 Answers

Well, you more or less have suggested the solution already.

const [selectedButton, setSelectedButton] = React.useState("");

const returnMask = (button) => {
    switch (button) {
        case "Key1":
            return maskOne
        case "Key2":
            return maskTwo
        case "Key3":
            return maskThree
        case "Key4":
            return maskFour
        default:
            return maskOne
    }
}

const [input, setInput] = useMask(
    returnMask(selectedButton)
);

or if you can rename your masks or rename the values set to selectedButton you could simply reference the elements by value.

const [selectedButton, setSelectedButton] = React.useState("");

const [input, setInput] = useMask([selectedButton]); 
// Rename ether `Key1`, `Key2` to `maskOne` or `maskTwo`, or do it the opposite way (renaming the masks)
user_69177530
Related