I am trying to output different components based on the inputType, however the component or anything that goes into the DOM does not render (aka console.logs fire correctly to confirm the if/if else statements are working correctly. Not quite sure how to resolve as we cannot move it into a class based component because you cannot use react hooks inside a class based component and we currently use the useStaticQuery react hook to query WordPress.
const ServiceQuestions = filter => {
const { allWpService } = useServiceQuery()
const renderQuestions = id => {
allWpService.nodes.map(service => {
if (service.id === id.filter) {
service.serviceQuestions.questions.map(question => {
question.questionInputField.map(inputField => {
if (inputField.inputType === "text") {
console.log(inputField.inputType)
} else if (inputField.inputType === "number") {
console.log(inputField.inputType)
} else if (inputField.inputType === "radio") {
return <InputCheckboxImageTop />
} else {
console.log("Cannot determine the inputType")
}
})
})
}
})
}
return <>{renderQuestions(filter)}</>
}
2
Answers
As per a comment suggested above, I removed the nested maps and instead used forEach loops which worked a charm, so for future reference here's the solution:
Your renderQuestions function doesn’t return the result array
You can replace
by
or use parentheses instead of curly brackets around your
allWpService.nodes.map