Breaking News: Grepper is joining You.com. Read the official announcement!

type of radio input change event typescript

Nazar Kinash answered on December 21, 2022 Popularity 6/10 Helpfulness 4/10

answer type of radio input change event typescript

type of radio input change event typescript

Comment

// App.tsx
import React, { useState } from "react";
import "./App.css";

const App = () => {
  // The selected drink
  const [selectedDrink, setSelectedDrink] = useState<String>();

  // This function will be triggered when a radio button is selected
  const radioHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedDrink(event.target.value);
  };

  return (
    <div className="container">
      <h3>KindaCode.com</h3>
      <fieldset>
        <legend>Please select your most favorite drink?</legend>
        <p>
          <input
            type="radio"
            name="drink"
            value="Coffee"
            id="coffee"
            onChange={radioHandler}
          />
          <label htmlFor="coffee">Coffee</label>
        </p>

        <p>
          <input
            type="radio"
            name="drink"
            value="Tea"
            id="tea"
            onChange={radioHandler}
          />
          <label htmlFor="tea">Green Tea</label>
        </p>

        <p>
          <input
            type="radio"
            name="drink"
            value="Pumpkin Juice"
            id="pumpkin"
            onChange={radioHandler}
          />
          <label htmlFor="pumpkin">Pumpkin Juice</label>
        </p>
      </fieldset>

      {/* Display the selected drink */}
      {selectedDrink && <h2>{selectedDrink}</h2>}
    </div>
  );
};

export default App;

Popularity 6/10 Helpfulness 4/10 Language typescript

Source: www.kindacode.com

Tags: input radio typescript

Link to this answer
Share Copy Link

Contributed on Dec 21 2022

Nazar Kinash

0 Answers Avg Quality 2/10

type of radio input change event typescript

Contents

More Related Answers

type of radio input change event typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.