I have a use case where I am mapping over a list coming from an API to a page in ReactJS:

[
 {question : "ques1", answer : "answer1"}, 
  question : "ques2", answer : "answer2"}, 
  question : "ques3", answer : "answer3"}, 
  question : "ques4", answer : "answer4"}, 
  question : "ques5", answer : "answer5"}, 
  question : "ques6", answer : "answer6"}
]

Now, I have to insert an input box for feedback for each of the question/answer set and send it to server.

The problem is for multiple users, there is unknown number of question/answer set. Say for example, there is:

user 1 - 10 question/answer set user 2 - 7 question/answer set ... etc..

I am mapping over the list and inserting an input field as:

data.map(() => (
<div>
  <p>{itm.question}</p>
  <p>{itm.answer}</p>
  <input onChange={(e) => setInput(e.target.value)}/>
</div>

))

And I have to send response as:

{
set_feedbacks : [
 {
  question_id : 124
  feedback : "a feedback for this question set1"
},
{
  question_id : 224
  feedback : "a feedback for this question set2"
},
{
  question_id : 928
  feedback : "a feedback for this question set3"
}
]
}
// could be more and depends on the number of sets we have

How can I achieve this?

Problems:

1. The question/answer set is unknown and different for different user, so is it really the best best to map over and insert an input field between each sets? If so, how can add different text for different sets, as the input text is just with only single handle change method.
2. How can form the structure to send it to the API? Do I need to form an array first by calculating the number of sets that was rendered to the screen?

Thank you for reading.

Any little guidance will be quite helpful for me

CodePudding user response：

If I understand correctly, you want to create a form where users can provide feedback on each question/answer set.

One of the efficient methods can be to

1. Create an object containing the question id as the key and the feedback as the value like -

   {"ques1":"this is the feedback"}

2. Updating the feedback state in the particular question id whenever the input updates

So the final code can be

To map the data

data.map((itm) => (
                <div>
                    <p>{itm.question}</p>
                    <p>{itm.answer}</p>
                    <input onChange={(e) => setFeedback({ ...feedback, [itm.question]: e.target.value })} />
                </div>

For the state

const [feedback, setFeedback] = useState({});

To convert this feedbackdata into the required data format

const onSubmit = () => {
    const feedbackarr = [];
    Object.keys(feedback).map((v) => {
        feedbackarr.push({
            "question_id": v,
            "feedback": feedback[v]
        })
    })
    const tosend = {
        set_feedbacks: feedbackarr
    }
}

CodePudding user response：

If you add different input boxes then yu need same number of states, one for each input box. Here instead of adding separate input boxes you can add a button from where a modal will work and you can put questionid which will come from button onclick function and there, along with the modal input as feedback with respective questionid you can make a post request to api.