triggering multiples functions with react/typescript

Question

Im trying to trigger a function every time a different radio button is clicked in my form. This is the form:

           <FormControl>
            <RadioGroup
                row
                aria-labelledby="demo-row-radio-buttons-group-label"
                name="row-radio-buttons-group"
                value = {selectionValue}
                onChange={handleSelection}
            >
                <FormLabel id="demo-radio-buttons-group-label">Price Selection</FormLabel>
                    <FormControlLabel id="standard" value="standard" control={<Radio />} label="standard" />
                    <FormControlLabel id="premium" value="premium" control={<Radio />} label="premium" />
                    <FormControlLabel id="excelium" value="excelium" control={<Radio />} label="excelium" />
            </RadioGroup>
            </FormControl>

and it triggers this onChange={handlefunction} which works and calls serviceCalc():

const [selectionValue, setSelectionValue] = useState("")

const handleSelection = (event : any) => {
    setSelectionValue(event.target.value);
    serviceCalc()
}

my problem is when I get to serviceCalc() the function prints my console.log and thats it. how can I get standard(), premium() and excelium() to go trough?

const serviceCalc = () => {

    console.log("service calc")

    const standard1 = (document.getElementById("standard") as HTMLInputElement);
    const premium1 = (document.getElementById("premium") as HTMLInputElement);
    const excelium1 = (document.getElementById("excelium") as HTMLInputElement);

    
    if (standard1.checked){                      
        standard();
    }
else if (premium1.checked) {             
        premium();
    }
    else if (excelium1.checked) {          
        excelium();
    }
}

any help is greatly appreciated.

If any of them were undefined you would get a TypeError, have you checked for that? If there is no error than either checked does not exist on the objects or it is false — about14sheep
– about14sheep, Commented Mar 27, 2022 at 19:05
I dont have a TypeError, it probably doesnt exists or it is false but im not sure how to fix that @about14sheep — user17710829
– user17710829, Commented Mar 27, 2022 at 19:12
either use a debugger or just console log standard1 or standard1.checked to see — about14sheep
– about14sheep, Commented Mar 27, 2022 at 19:32

cheesyMan · Accepted Answer · 2022-03-27 20:25:26Z

1

The id you're passing to <FormControlLabel id="someId"/> component, is NOT the id of the <input> HTML element but the id of its <label> element.

So when you check for document.getElementById("someId").checked you always get undefined and then you'll never go through your if - else checks.

answered Mar 27, 2022 at 20:25

cheesyMan

1,5301 gold badge6 silver badges14 bronze badges

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

2 Comments

user17710829 Over a year ago

Thank for your reply! do you know how I could do something like this? ((document.getElementById("standard") as HTMLLabelElement).checked) since it says Property 'checked' does not exist on type 'HTMLLabelElement'

cheesyMan Over a year ago

<label> HTML element has no checked property, so you can't access it (as Typescript says). What you could do is to pass the selected value of the Radio button as an argument to serviceCalc() function, so in that function you receive a value to decide which function to execute

Collectives™ on Stack Overflow

triggering multiples functions with react/typescript

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