Estoy trabajando en una aplicación de prueba. Creé un botón de radio y lo usé en QuestionCard. Este botón de opción muestra 4 opciones de preguntas. desafortunadamente, no puedo seleccionar la opción correcta de estas opciones. Actualmente, está verificando las 4 opciones una por una, pero debería alternar entre las opciones. También debería mostrar el botón SIGUIENTE al hacer clic en una opción, pero no muestra nada.

Lista de radio

 import React, { useState } from 'react'; import styled from 'styled-components'; interface StyledProps { active: boolean } interface radioProps { onChange: any val: any children?: any tag: any } const RadioList = ({ onChange, val, children, tag }: radioProps) => { const [select, setSelect] = useState(''); const handleSelectChange = (e: React.ChangeEvent<HTMLInputElement>) => { let val = e.currentTarget.value; setSelect(val); } return ( <Item active={select === 'optionA'}> <RadioButton type="radio" name="radio" value={'optionA'} checked={select === 'optionA'} onChange={e => handleSelectChange(e)} /> <Container> <Tag>{tag}</Tag> <Details> {children} </Details> </Container> </Item> ); } export default RadioList

tarjeta de preguntas

 type Props = { question: string; qImage?: string; answers: string[]; callback: (e: React.MouseEvent<HTMLButtonElement>) => void; userAnswer: AnswerObject | undefined; questionNr: number; totalQuestions: number; } export const QuestionCard: React.FC<Props> = ({ question, qImage, answers, callback, userAnswer, questionNr, totalQuestions }) => { return ( <div> {/* <ScoreCard >question No{questionNr}</ScoreCard> */} <p className='number'> Question: {questionNr} / {totalQuestions} </p> <Zoom> {!qImage ? '' : (<img src={qImage} width="400" alt="icons" />)} </Zoom> <p dangerouslySetInnerHTML={{ __html: question }} /> <div> {answers.map((answer, abc) => ( <div key={abc} > <RadioList onChange={callback} val={answer} children={answer} tag={abc + 1} /> </div> ))} </div> </div> ) }