REACT Array True or False Inputs? - arrays

Question

Im having difficulty serializing my inputs and saving it on my API. I cant manage to make it work.
Need some advice or inputs how to do this with arrays or even another simpler way.
I having problem how to put the radio button input array data into my postData that will be save to my API
postData is questionid, questiontype and answers
Questions:
1.Earth is flat? True False
2.Earth is round? True False
so my input is radio button like this
handleTF(event) {
const tfc = event.target.value;
console.log(event.target.name)
console.log(tfc);
this.setState({ [event.target.name]: tfc});
}
const tfcs = ["True", "False"]
{tfcs.map((tfc, index) => (
<label key={index}>
{tfc}
<input
name={qd.question.id}
value={tfc}
onChange={this.handleTF}
type="radio"
/>
</label>
))}
handleSubmitTF(event){
event.preventDefault();
const {
questionId,
questionType,
answer
} = this.state;
const postData = {
questionId,
questionType,
answer,
};
let sessionToken = sessionStorage.getItem('session');
let sessToken = sessionToken.replace(/\"/g, "");
fetch('sample.net', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'token'
},
body: JSON.stringify([postData]),
})
.then(response => response.json())
.then(response => {
console.log(response.title)
if(response.title === "Error"){
this.addNotification('danger', 'Danger', 'Already answered', 'top-right')
}else{
this.addNotification('success', 'Success', 'All Data is Saved', 'top-right')
this.componentDidMount();
}
})
.catch(err => {
console.log("fetch error" + err);
});
}

Answer 1

Context
It seems that your state is made of:
{ [event.target.name]: "True" | "False" }
But then you access it with:
const {
questionId,
questionType,
answer
} = this.state;
They do not match type / interface. In TypeScript terms your State looks like:
interface State {
[k: string]: "True" | "False";
}
Solutions
A. Send your state directly
As it has a valid structure, it would be easy to parse on the API side.
const postData = { ...this.state };
B. Send an Array of answers
Otherwise, if you need it as an Array of answers. You can transform it like:
const questions = Object.keys(this.state);
const postData = questions.map((question) => ({
question,
answer: this.state[name],
}));
Side note: Earth is flat, and it is called Discworld =o)