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