1

I am trying to code a mobile application which involves a quiz/questionnaire aspect to it where a user goes through it by inputting their choice and routing to the next page and inputting their next choice (this happens about 5 times with 5 questions) - I then have to display a final result based on their choices.

I thought the simplest way to do this would be by using an empty array and appending the user's input as the array elements as they go along the quiz and then creating my own algorithm with 'if' statements to display a result.

I cannot figure out how to pass the data along to the next page and append that value to the array.

PLEASE HELP HAHA I'm struggling with Ionic React!!

Code for routing in App.tsx:

      <Route exact path = "/question1" component = {Question1}/>
      <Route exact path = "/question2" component = {Question2}/>
      <Route exact path = "/question3" component = {Question3}/>
      <Route exact path = "/question4" component = {Question4}/>
      <Route exact path = "/question5" component = {Question5}/>

Radio group for a question (Question1.tsx):

  const [selected, setSelected] = useState<string>();
  
    return ( 
    <IonPage>
       <IonContent fullscreen>           
          <div className="Question3">
                How often do you work out? 
            </div>
            <IonList>
            <IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
            <IonItem>
              <IonLabel>Daily</IonLabel>
              <IonRadio slot="start" value="1" />
            </IonItem>

Next button in Question1.tsx:

<div className = "nextBttn">
  <IonCol>
     <IonButton size="small" routerLink = "/Question2">Next</IonButton>
   </IonCol>
</div>
ahsirk83
  • 23
  • 4
  • What have you tried? What is your routing/navigation code looking like? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese Apr 15 '22 at 22:24
  • I've used react router in the app.tsx file and I'm using routerLink in each question page to move to the next question – ahsirk83 Apr 15 '22 at 22:25
  • I can't find any official documentation regarding sending either route state or URL queryString params. It uses `BrowserRouter` under the hood so I would assume there'd be a way to do either, but their source code is a bit messy. After some other searches it seems the consensus is to implement a React context to store values there, navigate, then access in the receiving component. – Drew Reese Apr 15 '22 at 23:32
  • 1
    why do you switch pages when u can simply switch components (like a slideshow) and u get to keep the states in the parent component, just increase a setValue(value+=1), ([value, setValue] = useState(0)) when u click next, and if {value === 0 ? : value === 1 : } – codmitu Apr 16 '22 at 07:49
  • 1
    @c0dm1tu so I've used your suggestion, and made the entire questionnaire using ionic slides and I am able to create an array called Answers which stores the selected value from each question. I wanted to enquire how I can now use an if statement with this array and then navigate to a specific page when I click "next" on the last question? – ahsirk83 Apr 19 '22 at 01:37
  • @ahsirk83 `` , `const handleClick=()=>{if (your condition) {navigate("/home")} else {navigate("/answers")}} `, remember to import {useNavigate} from "react-router-dom", npm i react-router-dom if you havent already installed it, if you have the previous version of react import {useHistory} from "react-router-dom" const history = useHistory() and use it as `history.push("/home")`, or if its an external link just use window.location = "https://....." – codmitu Apr 19 '22 at 08:37

1 Answers1

0

Ionic React versions 5 + 6 both use React Router 5, but the Ionic router adds some additional handling related to back button that makes things a little more complicated.

Use query-string

Instead of storing your answers as react-router parameters, store them as query strings; they will be much easier to parse that way.

Here is an example of how I handle some simple redirects in an Ionic React app. You could use the same approach

component that parses a query string

import queryString from 'query-string';

  const parsedQueryString = queryString.parse(window.location.search);
  const { dest } = parsedQueryString;
  // Now we can do whatever we want with the redirect destination.

component that sets a link that contains a query string

let dest;
if (someBooleanValue) {
  dest = '?dest=page1';
} else {
  dest = '?dest=page2';
}
return (
  <IonButton
    routerLink={`${routeVariable}${dest}`}
      >
        Go Somewhere
  </IonButton>

Alternate solution:

You could also create a context with useState() or useReducer() and store the answers there. This is quite a bit more complicated to set up though.

Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76