Updating state with multiple radio button groups in one component react

Question

I am trying to update my component's state with the radio buttons' values. When I make the second radio button selection (reason for status) I get an error telling me

Uncaught TypeError: cannot read properties of undefined (reading 'map')

When I click the submit button, the state is only showing the state for the first group of radio buttons ie current status and then it is showing the selected value as an empty string (default state value) and not the value as per the radio button selection

Can anyone help? Here is my code:

import {Container, Row, Col, Form,  Button } from 'react-bootstrap';
import { useState } from 'react';



const Question = (q) => {

    //state to hold responses from input
    const [questionState, setQuestionState] = useState({
        options: [
            {   radioName: 'currentstatus',
                selected: '' },
            {   radioName: 'reasonstatus',
                selected: ''},
            {   radioName: 'actions',
                selected: ''},
            {   radioName: 'actowner',
                selected: ''},
            {   radioName: 'actstat',
                selected: ''}

        ]
    });

    //EVENT HANDLERS

    //radio buttons onchange
    const handleChange = (e)=>{
        const { options } = questionState;
        const {name, value} = e.target;
        console.log(name, value);
        
        const nextState = options.map( opt => {
            if (opt.radioName !== name) {
                return {...opt}
            } else {
                return {...opt, 
                    selected: value} 
            } 
        });

        setQuestionState(...options, {nextState});
        
    }

    //date picker event
    const handleDate = (e) => {
        console.log(e.target.value);

    }
    //overall form submission
    const handleSubmit = (e) => {
        console.log(questionState);
    }

    const question = q;
    return(

        
            
                
                    
                        
                            {question.question}
                        

                        {/* ---------------- CURRENT STATUS  ----------------------- */}
                        Current Status:
                            
                                
                                
                                
                                
                                
                            
                                        

                        {/* -------------------- REASONS FOR STATUS --------------------------- */}
                        Reason for Status:
                            
                                
                                
                                
                                
                            
                                        

                        {/* -------------------- ACTIONS --------------------------- */}
                        Action to be taken:
                            
                            
                            
                            
                            
                            
                                       

                        {/* -------------------- ACTION OWNER --------------------------- */}
                        Action Owner:
                            
                            
                            
                            
                        

                        {/* -------------------- ACTION STATUS --------------------------- */}
                        Action Status:
                            
                            
                            
                            
                            
                                       
                        {/*  --------------------- DATE PICKER ------------------------- */}
                        
                            
                                Due Date:
                                
                            
                        
                        
                            
                        
                        
                        
                    
                
                                
            
        
    )
}

export default Question;

Amila Senadheera · Accepted Answer

In handleChange, the following is not a valid state update. Due to that, your state was missing options entry after each radio button click.

setQuestionState(...options, {nextState});

1st way

The above line should be replaced with the following.

setQuestionState({ ...questionState, options: nextState });

2nd way

It is always safe to use the callback version of updating the state. Therefore, handleChange function should be corrected as below.

  const handleChange = (e) => {
    const { name, value } = e.target;
    setQuestionState((prevState) => {
      return {
        ...prevState,
        options: prevState.options.map((opt) => {
          if (opt.radioName !== name) {
            return { ...opt };
          } else {
            return { ...opt, selected: value };
          }
        })
      };
    });
  };

Updating state with multiple radio button groups in one component react

Answers (1)

1st way

2nd way

Related Questions