REACT JS FIREBASE- how to display multiple selected radio button in one form?

Question

i have a examination project system i have stored all the data on firestore database, i have a questions together with choices and points for each question when the user got it right.

import "./startExam.scss"
import HomeSidebar from '../homeSidebar/HomeSidebar'
import HomeNavbar from '../homeNavbar/HomeNavbar'
// import * as React from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import { useParams , useNavigate } from 'react-router-dom';
import { getDocs, collection , onSnapshot,  deleteDoc,  doc , updateDoc } from '@firebase/firestore'
import { db } from '../../firebase'
import React, { useEffect, useState,useRef } from 'react'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

const StartExam = () => {

  const [getDocs,setgetDocs] = useState([])
  const [answer,getAnswer] = useState([])
  let {id}=useParams()
  const isMounted = useRef()
  const collectionRef = collection(db, "Exams",id,"qna")
  const dataref = collection(db,"Exams")
  //const [examState, setexamState]=useState({questionIndex:0})
  //const {questionIndex}=examState
  let navigate = useNavigate();

  const getData = () => {
    onSnapshot(collectionRef, (data) => {
      setgetDocs(data.docs.map((doc) => {
            return {...doc.data(), id: doc.id}
        }))
        
    })
      }

    //    const Title = () => {
    // onSnapshot(dataref, (data) => {
    //   setTitle(data.docs.map((doc) => {
    //         return {...doc.data(), id: doc.id}
    //     }))
        
    // })
    //   }
      
     
      useEffect(() => {
        if(isMounted.current){
            return 
        }
  
        isMounted.current = true;
        getData()
        // Title()
      }, []);

      function handleSubmit(e){
        e.preventDefault();
        
       console.log(answer)
        // const examcollref = collection(db,'Exams',id,"qna")
        // navigate(`score/${id}`)
     
      } 
   
  return (
   <div className="startExam">
       <HomeSidebar/>
       <div className="startExamContainer">
         
          <div className="titleContainer" >
               title here
         </div>
        
         <Form >
             {getDocs.map((rows)=>{
              return(
           <div className="questionContainer" key={id}>
           
           <FormControl >
              <FormLabel id="demo-radio-buttons-group-label">{rows.question} ({rows.scoring} points)</FormLabel>
              <RadioGroup
                aria-labelledby="demo-radio-buttons-group-label"
                >
                <FormControlLabel key={id} value={rows.correctanswer} control={<Radio />} label={rows.correctanswer} onChange={e=>getAnswer(e.target.value)} />
                <FormControlLabel key={id} value={rows.optionone} control={<Radio />} label={rows.optionone}onChange={e=>getAnswer(e.target.value)} />
                <FormControlLabel key={id} value={rows.optiontwo} control={<Radio />} label={rows.optiontwo} onChange={e=>getAnswer(e.target.value)}/>
                <FormControlLabel key={id} value={rows.optionthree} control={<Radio />} label={rows.optionthree} onChange={e=>getAnswer(e.target.value)}/>
              </RadioGroup>
              </FormControl>
              </div>
               )
          })}
          <Button variant="primary" type="submit" onClick={handleSubmit}>
                  Submit
                </Button>
          </Form>

           

           
       </div>
   </div>
  )
}

export default StartExam

here is my code where the question and choices will display, i successfully displayed it in my ui but when i click the submit button i only got 1 value out of the length of questions.

function handleSubmit(e){
        e.preventDefault();
        
       console.log(answer)
        // const examcollref = collection(db,'Exams',id,"qna")
        // navigate(`score/${id}`)
     
      } 

this line is the function of the submit button, i intentionally put all the selected items on console so i can check if its working or not, but its not working, it only read one value

can you help me with that? im new to react js and firebase please bear with me

Answer 1

Refer to the example code provided for Handling Multiple Inputs, from the React official documentation.

Add a handler function something like:

handleChange (e) {
    // check it out: we get the e.target.name
    // and use it to target the key on our `state` object with the same name
    this.setState({ e.target.name: e.target.value });
  }

and, modify the onChange call something like below

onChange={this.handleChange}

HTH, else do let know of the issue, if any.