Typescript esta clase de mecanografiado en un intento de cambiar el color de la fila en una tabla. Mi objetivo era actualizar dinámicamente el className para el tr . Todo se muestra como se esperaba, pero no sucedió nada cuando marco/desmarco la casilla. ¿Cómo puedo solucionar esto?

 import React from 'react'; import './App.css'; let classname: string = "checkbox-row1"; function getColor(pvalue: boolean) { if (pvalue) { classname = "checkbox-row1-red"; } else { classname = "checkbox-row1-blue"; } } export default function App() { return ( <div className="App"> <header className="App-header"> <div className="checkbox-div"> <table className="checkbox-table"> <tr className={classname}> <td className="checkbox-row1"><label className="my-label">Check: <input type="checkbox" onClick={() => getColor(true)} name="change-color"></input></label></td> <td className="tr2-td2">2</td> <td className="tr3-td3">3</td> </tr> </table> </div> </header> </div> ); }

 .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .checkbox-row1 { background-color: #ffffff; } .checkbox-row1-blue { background-color: blue; } .checkbox-row1-red { background-color: red; } .my-label { color: black; }