Formik Field radio button is clicked and value got updated, but does not showing radio button as selected

Question

I have been working on quiz app with multiple radio buttons using React along with Formik. I don't want the radio buttons to have defaultCheckedattribute. Form submit is working the way I wanted, the values of each radio buttons are shown on alert. But the radio button is not showing as selected in the browser.

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import {
  Button,
  ButtonGroup,
  Col,
  Container,
  FormGroup,
  Input,
  Label,
  Row,
} from 'reactstrap';
import { Questions, initialValues } from './dummy';
import ModalConfirm from './ModalConfirm';
import './FormQuiz.css';
import ButtonGrid from './ButtonGrid';

function FormQuiz() {
  const [isOpen, setIsOpen] = useState(false);
  const [confirm, setConfirm] = useState(false);

  const [step, setStep] = useState(1);
  const [questions, setQuestions] = useState(Questions);

  const toggle = (e) => setIsOpen(!isOpen);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!confirm) {
      toggle();
    }
  };

  return (
    
      
        
          
           {
              await new Promise((r) => setTimeout(r, 500));
              alert(JSON.stringify(values, null, 2));
            }}
          >
            {({ values }) => (
              
                
                  {questions.map((question, questionIndex) => (
                    
                      
                        {questionIndex + 1}
                        {'. '}
                        {question.questionText}
                      
                      {question.options.map((option, optionIndex) => (
                        
                          
                          
                            {option}
                          
                        
                      ))}
                      {values[`option${questionIndex + 1}`]}
                    
                  ))}
                
                
                

                
              
            )}
          
        
      
    
  );
}

export default FormQuiz;

Here is the hard coded Questions and initialValues dummy.js

export const Questions = [
  {
    questionText: 'HTML?',
    options: [
      'Hyper Tech Machine Learning',
      'How To Mitigate Linda',
      'How To Master Linguistics',
      'Hyper Text Markup Language',
    ],
    correctOption: 4,
  },
  {
    questionText: 'NodeJS invented by',
    options: ['Carls Linus', 'Ryan Dahl', 'Siraj Raval', 'Bill Gates'],
    correctOption: 2,
  }
];

let values = {};
Questions.forEach((question, index) => {
  values[`option${index + 1}`] = '';
});
export let initialValues = values;

Please help me with this. And if there is any better way to implement this, let me know.

user_13227001 · Answer

Having been caught out by this myself, I can tell you that the issue is probably due to the value attribute for your JSX tag being a number type, as opposed to being a string (yes, I know that might be by design, but bear with me...).

If you change the value of the value attribute to be the string representation of the number, the UI should update and show the radio button as selected.

OPs code:

I used Yup for schema validation (as recommended by the Formik documentation on validation) and this still passed validation for a nullable required number:

Yup.number().required('Required').nullable()

If you're interested in using Yup for schema validation, it looks like Yup simply takes the value, and attempts to parse it as a number. If the value is not able to be parsed as a number, Yup will serve up a NaN error message and the value will fail validation.

Beware, however as this is obviously stored in the values object as a string, so if this is going to catch you out later on in your code, make sure you account for it.

user_6381630 · Answer

Use like this: 1st mistake: use same name for radio input 2nd mistake: pass checked prop when to show it selected

Formik Field radio button is clicked and value got updated, but does not showing radio button as selected

2 Answers