nmay231/App.js

## App.js
import React from "react";
import "./App.css";

function App() {
  const [current, setCurrent] = React.useState(1);
  const options = [1, 2, 3];

  const handleChange = e => {
    console.log(e.target);
    setCurrent(parseInt(e.target.value));
  };

  return (
    <div className="d-flex">
      <div className="btn-group btn-group-toggle mx-auto mt-5" data-toggle="buttons">
        {options.map(option => (
          <label
            className={
              "btn btn-secondary" + (option === current ? " active" : "")
            }
            key={option}
          >
            <input
              type="radio"
              name="options"
              id={"option" + option}
              value={option}
              checked={option === current}
              onChange={handleChange}
            />
            Radio {option}
          </label>
        ))}
      </div>
    </div>
  );
}

export default App;

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <!-- Problematic script here. Uncommenting will break the onChange handler -->
    <!-- <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script> -->
  </body>
</html>
	import React from "react";
	import "./App.css";

	function App() {
	const [current, setCurrent] = React.useState(1);
	const options = [1, 2, 3];

	const handleChange = e => {
	console.log(e.target);
	setCurrent(parseInt(e.target.value));
	};

	return (
	<div className="d-flex">
	<div className="btn-group btn-group-toggle mx-auto mt-5" data-toggle="buttons">
	{options.map(option => (
	<label
	className={
	"btn btn-secondary" + (option === current ? " active" : "")
	}
	key={option}
	>
	<input
	type="radio"
	name="options"
	id={"option" + option}
	value={option}
	checked={option === current}
	onChange={handleChange}
	/>
	Radio {option}
	</label>
	))}
	</div>
	</div>
	);
	}

	export default App;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<link
	rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
	crossorigin="anonymous"
	/>
	<title>React App</title>
	</head>
	<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<script
	src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
	crossorigin="anonymous"
	></script>
	<!-- Problematic script here. Uncommenting will break the onChange handler -->
	<!-- <script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
	integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
	crossorigin="anonymous"
	></script> -->
	</body>
	</html>