[FIXED] how to define state or object to send data with POST api in react

Issue

i have a GET api that gets these data:

{
    "questions": [
        {
            "question": {
                "id": 110,
                "title_text": "question title 1",
                "metric_id": 27,
                "sub_metric_id": 28,
                "image_url": null
            },
            "answers": [
                {
                    "id": 104,
                    "title_text": "answer 1",
                    "image_url": null,
                    "question_id": 110
                },
                {
                    "id": 105,
                    "title_text": "answer 2",
                    "image_url": null,
                    "question_id": 110
                },
                {
                    "id": 106,
                    "title_text": "answer 3",
                    "image_url": null,
                    "question_id": 110
                }
            ]
        },
        {
            "question": {
                "id": 111,
                "title_text": "question title 2",
                "metric_id": 31,
                "sub_metric_id": 32,
                "image_url": null
            },
            "answers": [
                {
                    "id": 108,
                    "title_text": "this answer my answer",
                    "image_url": null,
                    "question_id": 111
                },
                {
                    "id": 109,
                    "title_text": "my answerio",
                    "image_url": null,
                    "question_id": 111
                },
                {
                    "id": 110,
                    "title_text": "hello every body",
                    "image_url": null,
                    "question_id": 111
                }
            ]
        },
        {
            "question": {
                "id": 112,
                "title_text": "question 3 question",
                "metric_id": 27,
                "sub_metric_id": 29,
                "image_url": null
            },
            "answers": [
                {
                    "id": 111,
                    "title_text": "answer111",
                    "image_url": null,
                    "question_id": 112
                },
                {
                    "id": 112,
                    "title_text": "answer222",
                    "image_url": null,
                    "question_id": 112
                },
                {
                    "id": 114,
                    "title_text": "answer3333",
                    "image_url": null,
                    "question_id": 112
                }
            ]
        }
    ]
}

I get this data through the following code and show it:

  const [testQuestions, setTestQuestions] = useState([]);

  useEffect(() => {
    const fetchTestsQuestion = async () => {
      try {
        const { data } = await axios.get(
          "url"
        );
        setTestQuestions(data.questions);
      } catch (error) {
        console.error(error.message);
      }
    };

    fetchTestsQuestion();
  }, []);

      <form className="App">
        {testQuestions.map((item) => {
          return (
            <>
              <h1 value={item.question.id}>{item.question.title_text}</h1>

              {item.answers.map((sub, index) => {
                return (
                  <>
                    <input
                      type="radio"
                      id={index}
                      name={sub.question_id}
                      value={sub.title_text}
                    />
                      <label for={sub.title_text}>{sub.title_text} </label>
                    <br />
                  </>
                );
              })}
            </>
          );
        })}

        <button className="btn btn-default" type="submit">
          Submit
        </button>
      </form>

And I have another POST api that should send data when the button is clicked, but I don't know how to create useState or object to save data for send this data. Because I have to send the data as follows

{
    
    "result": [
        {
            "questionId" : 110 , 
            "answerId" : 105 , 
            "metricId" : 27, 
            "subMetricId" :  28
        } , 
        {
            "questionId" : 111 , 
            "answerId" : 109 ,
            "metricId" : 31, 
            "subMetricId" :  32
        } , 
        {
            "questionId" : 112 , 
            "answerId" : 113 ,
            "metricId" : 27, 
            "subMetricId" :  29
        } , 
        {
            "questionId" : 113 , 
            "answerId" : 118,
            "metricId" : 27, 
            "subMetricId" :  28
        }  

    ] 
}

for more information: questionId is : "question": {"id": 110,

"answerId" is : "id": 104,

"metricId" : 27, and "subMetricId" : 28 are in questions.question

Solution

you should use onChange in input element

<input
   type="radio"
   id={index}
   name={sub.question_id}
   value={sub.id}
   onChange={(e) => {
     setData(e.target.value);
   }}
/>

and use foreach loop for get data

let store = [];
const setData= (answerId) => {

testQuestions.forEach(function (obj) {
  obj.answers.map(function (o) {
    if (answerId == o.id) {
      store.forEach(function (data, index) {
        if (obj.question.id == data.questionId) {
          store.splice(index, 1);
        }
      });
      store.push({
        questionId: obj.question.id,
        answerId: answerId,
        metricId: obj.question.metric_id,
        subMetricId: obj.question.sub_metric_id,
      });
    }
  });
});

Answered By - kamal
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)