I have designed a quiz app and i have mapped the questions and options now i need to console the data on click submit button as an array like [{questionId:1,selectedAns:"xxx"},{questionId:2,selectedAns:"xxx"}] but now i its only dispalying one data and if i click the other button the data is changed to that

import Data from "../../Pages/Question/Data";
export default function ShowAll() {
  const [data, setData] = React.useState([]);
  console.log(data);
  return (
    <>
      {Data.map((item) => {
        return (
          <>
            <div >
              <div >{item.questionText}</div>
              <ul >
                {item.answerOptions.map((ans, index) => {
                  return (
                    <li >
                      <label htmlFor={item.questionText}>
                        <span>{index   1})</span>
                        <input
                          type="radio"
                          name={item.questionText}
                          id={item.questionText}
                          value={ans.answerText}
                          onChange={(e) => {
                            setData(e.target.value);
                          }}
                        />
                        {ans.answerText}
                      </label>
                    </li>
                  );
                })}
              </ul>
            </div>
          </>
        );
      })}
      <button
        onClick={handleClose}
      >
        Submit
      </button>
    </>
  );
}

This is my Data.js:

const Data = [
    {
        questionId:"1",
        questionText: 'What does the abbreviation HTML stand for?',
        answerOptions: [
            { answerText: 'Hyper-text markup', isCorrect: false },
            { answerText: 'Hyper-text makeup', isCorrect: false },
            { answerText: 'Hyda-text markup', isCorrect: true },
            { answerText: 'none', isCorrect: false },
        ],
    },
    {
        questionId:"2",
        questionText: 'Which CSS property defines the radius of an elements corners?',
        answerOptions: [
            { answerText: 'border-corner', isCorrect: false },
            { answerText: 'radius', isCorrect: true },
            { answerText: 'corner', isCorrect: false },
            { answerText: 'border-radius', isCorrect: false },
        ],
    },
    {
        questionId:"3",
        questionText: ' Which CSS property allows you to specify an image to be used instead of the normal border around an element?',
        answerOptions: [
            { answerText: 'border-image', isCorrect: true },
            { answerText: 'border-picture', isCorrect: false },
            { answerText: 'border-bgimage', isCorrect: false },
            { answerText: 'none-of-above', isCorrect: false },
        ],
    },
    {questionId:"4",
        questionText: ' Which CSS property sets the opacity for the whole element?',
        answerOptions: [
            { answerText: 'opacity-value', isCorrect: false },
            { answerText: 'opacity', isCorrect: false },
            { answerText: 'opacity-bg', isCorrect: false },
            { answerText: 'opacity-bg-image', isCorrect: true },
        ],
    },
];
export default Data;

CodePudding user response：

You need to update the array, instead of overriding it. But I think an object is easier to update:

const [data, setData] = React.useState({});

const handleChange = (questionId, value) => {
  setData(data => ({ ... data, [questionId]: e.target.value }));
};

In JSX:

onChange={(e) => handleChange(item.questionId, e.target.value)}