Is there a way to create variables for react hooks at runtime, so that the value of variables can be extracted and passed to an API at runtime as against having specific variable names created at design time the way I am currently doing it
See my code below
import React, { FC, useState } from "react"import { View, SafeAreaView, TextInput, ImageBackground, ScrollView, Alert } from "react-native"import { StackScreenProps } from "@react-navigation/stack"import { observer } from "mobx-react-lite"import { Button, Text } from "../../components"import { NavigatorParamList } from "../../navigators"import { Images } from "../../config"import { store } from "../../store"import { RadioButton } from "react-native-paper"import axios from "axios"import { SEND_FEEDBACK_URL, showErrorAlert } from "../../utils/constants"import { BOTTOM_HALF, CONTINUE, CONTINUE_TEXT, FOOTER_CONTENT, FULL, LABEL, RED_ACTION_LINK, RED_ACTION_STYLES, REGULAR_TEXT, SMALLL_TEXT, SMALLL_TEXT_C, SUBJECT, textArea, textAreaContainer,} from "./send-feedback-styles"export const SendFeedbackScreen: FC<StackScreenProps<NavigatorParamList, "Send">> = observer( ({ navigation }) => { const tempQuestIdArray = [] let tempStr: string, temp0: string, temp1: string, temp2: string, temp3: string, temp4: string, temp5: string, temp6: string, temp7: string const [freeText, setFreeText] = useState("") console.log("<<<<<<BEFORE fetching stored token") const token = store.getState().token.tokenValue console.log("<<<<<<<PROFILE TOKEN>>>>>>>>>") console.log(JSON.stringify(token)) console.log("<<<<<<<PROFILE TOKEN>>>>>>>>>") console.log("<<<<<<BEFORE fetching stored Sales Agent Id") const salesAgentId = store.getState().salesAgentId.salesAgentIdValue console.log("<<<<<<< SALES Agent id >>>>>>>>>") console.log(JSON.stringify(salesAgentId)) console.log("<<<<<<< SALES Agent id >>>>>>>>>") const getSuccessScreen = () => navigation.navigate("Successful") const config = { headers: { Authorization: `bearer ${token}` }, } const api = axios.create({ baseURL: SEND_FEEDBACK_URL, }) const [checked0, setChecked0] = useState("") const [checked1, setChecked1] = useState("") const [checked2, setChecked2] = useState("") const [checked3, setChecked3] = useState("") const [checked4, setChecked4] = useState("") const [checked5, setChecked5] = useState("") const [checked6, setChecked6] = useState("") const [checked7, setChecked7] = useState("") const [questIdStore, setQuestIdStore] = useState([]) // const { setToken } = useTokenStore() const barcodeId = store.getState().barcodeId.barcodeIdValue const CustomerId = store.getState().customerId.customerIdValue const DeviceId = store.getState().deviceId.deviceIdValue const questionsArray = store.getState().questionArray.questionArrayValue const CustomerName = store.getState().customerName.customerNameValue const QUESTIONS = questionsArray console.log("questions >> ", QUESTIONS) // console.log("QUESTIONS[0].id >> ", QUESTIONS[0].id) const renderInputRadios = () => { const qArray = QUESTIONS return (<View> {qArray.map((i, key) => { console.info("key >>> ", key) console.info("i.id >>> ", i.id) tempQuestIdArray.push(i.id) // setQuestIdStore(tempQuestIdArray) --causing re renders // eslint-disable-next-line no-eval tempStr = eval("checked" + key) console.info("tempQuestIdArray >>> ", tempQuestIdArray) switch (key) { case 0: temp0 = tempStr console.info("temp0 >>> ", temp0) break case 1: temp1 = tempStr console.info("temp1 >>> ", temp1) break case 2: temp2 = tempStr console.info("temp2 >>> ", temp2) break case 3: temp3 = tempStr console.info("temp3 >>> ", temp3) break case 4: temp4 = tempStr console.info("temp4 >>> ", temp4) break case 5: temp5 = tempStr console.info("temp5 >>> ", temp5) break case 6: temp6 = tempStr console.info("temp6 >>> ", JSON.stringify(temp6)) break case 7: temp7 = tempStr console.info("temp7 >>> ", JSON.stringify(temp7)) break default: console.info("INSIDE DEFAULT") } return (<View key={key}><View style={RED_ACTION_STYLES}><View><Text style={SMALLL_TEXT}>{i.questionWord}</Text></View><View style={RED_ACTION_LINK}><Text style={SMALLL_TEXT_C}>1</Text><RadioButton value="0" status={tempStr === "0" ? "checked" : "unchecked"} onPress={() =>{ switch (key) { case 0: setChecked0("0") break case 1: setChecked1("0") break case 2: setChecked2("0") break case 3: setChecked3("0") break case 4: setChecked4("0") break case 5: setChecked5("0") break case 6: setChecked6("0") break case 7: setChecked7("0") break default: console.info("INSIDE DEFAULT") } } } /><Text style={SMALLL_TEXT_C}>2</Text><RadioButton value="1" status={tempStr === "1" ? "checked" : "unchecked"} onPress={() =>{ switch (key) { case 0: setChecked0("1") break case 1: setChecked1("1") break case 2: setChecked2("1") break case 3: setChecked3("1") break case 4: setChecked4("1") break case 5: setChecked5("1") break case 6: setChecked6("1") break case 7: setChecked7("1") break default: console.info("INSIDE DEFAULT") } } } /><Text style={SMALLL_TEXT_C}>3</Text><RadioButton value="2" status={tempStr === "2" ? "checked" : "unchecked"} onPress={() =>{ switch (key) { case 0: setChecked0("2") break case 1: setChecked1("2") break case 2: setChecked2("2") break case 3: setChecked3("2") break case 4: setChecked4("2") break case 5: setChecked5("2") break case 6: setChecked6("2") break case 7: setChecked7("2") break default: console.info("INSIDE DEFAULT") } } } /><Text style={SMALLL_TEXT_C}>4</Text><RadioButton value="3" status={tempStr === "3" ? "checked" : "unchecked"} onPress={() =>{ switch (key) { case 0: setChecked0("3") break case 1: setChecked1("3") break case 2: setChecked2("3") break case 3: setChecked3("3") break case 4: setChecked4("3") break case 5: setChecked5("3") break case 6: setChecked6("3") break case 7: setChecked7("3") break default: console.info("INSIDE DEFAULT") } } } /><Text style={SMALLL_TEXT_C}>5</Text><RadioButton value="4" status={tempStr === "4" ? "checked" : "unchecked"} onPress={() =>{ switch (key) { case 0: setChecked0("4") break case 1: setChecked1("4") break case 2: setChecked2("4") break case 3: setChecked3("4") break case 4: setChecked4("4") break case 5: setChecked5("4") break case 6: setChecked6("4") break case 7: setChecked7("4") break default: console.info("INSIDE DEFAULT") } } } /></View></View></View> ) })}<View style={textAreaContainer}><TextInput style={textArea} underlineColorAndroid="transparent" placeholder="Type something" placeholderTextColor="grey" numberOfLines={5} multiline={true} value={freeText} onChangeText={(freeText) => setFreeText(freeText)} /></View></View> ) } const onSendFeedbacck = async () => { if (!checked1) { showErrorAlert("Your Response") return } if (!checked2) { showErrorAlert("Your Response") return } if (!checked3) { showErrorAlert("Your Response") return } console.log("<<< inside onSendFeedbacck >>>>>") const quest1: string = QUESTIONS[0].id const quest2: string = QUESTIONS[1].id const quest3: string = QUESTIONS[2].id const quest4: string = QUESTIONS[3].id const quest5: string = QUESTIONS[4].id const quest6: string = QUESTIONS[5].id const quest7: string = QUESTIONS[6].id // const salesAgentId = LOCAL_SALES_AGENT_ID console.log("quest1 ..>>>>>>>> ", quest1) console.log("quest2 ..>>>>>>>> ", quest2) console.log("quest3 ..>>>>>>>> ", quest3) console.log("quest4 ..>>>>>>>> ", quest4) console.log("quest5 ..>>>>>>>> ", quest5) console.log("quest6 ..>>>>>>>> ", quest6) console.log("quest7 ..>>>>>>>> ", quest7) const answer1 = { questionId: quest1, answer: Number(checked0), } const answer2 = { questionId: quest2, answer: Number(checked1), } const answer3 = { questionId: quest3, answer: Number(checked2), } const answer4 = { questionId: quest4, answer: Number(checked3), } const answer5 = { questionId: quest5, answer: Number(checked4), } const answer6 = { questionId: quest6, answer: Number(checked5), } const answer7 = { questionId: quest7, answer: Number(checked6), } const AnswerArray = [] AnswerArray.push(answer1) AnswerArray.push(answer2) AnswerArray.push(answer3) AnswerArray.push(answer4) AnswerArray.push(answer5) AnswerArray.push(answer6) AnswerArray.push(answer7) console.log("AnswerArray ..>>>>>>>> ", AnswerArray) const AnswerArrayStr = JSON.stringify(AnswerArray) console.log("AnswerArrayStr ..>>>>>>>> ", AnswerArrayStr) const AnswerArrayObj = JSON.parse(AnswerArrayStr) console.log("AnswerArrayObj ..>>>>>>>> ", AnswerArrayObj) const dataToSend = { customerId: CustomerId, productDeviceId: DeviceId, questions: AnswerArrayObj, otherComments: freeText, salesAgentId: salesAgentId, } console.log("dataToSend ..>>>>>>>> ", dataToSend) try { console.log("<<<<<<<BEFORE RESPONSE FOR SEND FEEDBACK >>>>>>>>>") console.log("dataToSend >> ", dataToSend) console.log("config >> ", config) const res = await api.post("/", dataToSend, config) console.log(res) console.log("Res >> ", res) console.log("<<<<<<<AFTER RESPONSE FOR SEND_FEEDBACK_URL >>>>>>>>>") // eslint-disable-next-line no-prototype-builtins if (res.hasOwnProperty("data")) { // Get Response getSuccessScreen() } else { console.log("<<<<<<<ERRRRRROR>>>>>>>>>") } } catch (err) { console.log(err) Alert.alert("Error " + err) } } return (<ImageBackground source={Images.bg} style={FULL}><ScrollView showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}><View style={BOTTOM_HALF}><SafeAreaView><Text style={SUBJECT}>Device Identified</Text><View><Text style={LABEL}>Barcode ID</Text><Text style={REGULAR_TEXT}>{barcodeId}</Text></View><View><Text style={LABEL}>Customer </Text><Text style={REGULAR_TEXT}>{CustomerName}</Text></View><View><Text style={LABEL}> Please Fill the Form Below to Provide More Information on This Device{" "}</Text></View> {renderInputRadios()}<View style={FOOTER_CONTENT}><Button testID="next-screen-button" style={CONTINUE} textStyle={CONTINUE_TEXT} tx="inside.send_feedback" onPress={onSendFeedbacck} /></View></SafeAreaView></View></ScrollView></ImageBackground> ) },)You can see from my code above that I am creating an array of temporary radio button values from user inputs but I am unable to get the result of the user actions
You can also see that I am creating temporary variables objects for answer1 to answer7. This limits the component results to just seven
Thats against the requirement
Is there a way around this
Thanks