How can I pass data across pages and append an input to an array? (Ionic + React)

Question

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>

Answer 1

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.